Prefill custom fields in widget is not working | Community
Skip to main content

Prefill custom fields in widget is not working

  • January 15, 2018
  • 1 reply
  • 0 views
A

I have the widget loaded in the index.html and I hide it with zE.hide(). After my user logs in... I set the username and email with  zE.identify({ name: this.user.Name, email: this.user.Username }) and also I am trying to set a custom field called Company with some value. After I show the widget with the zE.show() I see the username and email but there is no way to display the Company. If I prefill Company with some default value like "Some Company" in a script in html I see that text, but when I try to set the real company value after the user logs in.... I still see the default value. 

To set the company value I have tried many options... and nothing works. Eg. 

jQuery("iframe#webWidget").contents().find('input[name=114103734111]').val('1111');

Ideas?

    This topic has been closed for replies.

    1 reply

    B
    • Becca14
    • January 20, 2018
    Hi Ariel - 

    From what I gather you are looking to prefill the Company text field after a user logins and the widget is loaded. Overall, the Widget can only display ticket fields however it sounds like Company would be user or organization level data. If you have a method to get the company name you'd likely be able to get it client side and then display it in the field using Javascript. To test this out I made an Ajax request to our Core API Users endpoint for the user object and then parsed the returned user object for the custom user text field that stored the company name. I stored this data in a variable, passed it to the Widget prefill code and was able to dynamically set the custom ticket text field in the widget with the company information. 

    Here's an example of my code - you will need an OAuth token to make client side GET requests to our API: 

    <!DOCTYPE html>
    <html>
      <head>
        <meta charset="UTF-8">
        <title>title</title>

    <script src="https://code.jquery.com/jquery-3.2.1.js" integrity="sha256-DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35EouyE=" crossorigin="anonymous"></script>
      </head>
      <body>

    <script type="text/javascript">
    $.ajax({ 
    url: 'https://SUBDOMAIN.zendesk.com/api/v2/users/USER_ID.json', 
    type: 'GET', 
    beforeSend: function (xhr) { 
    xhr.setRequestHeader("Authorization", "Bearer  OAUTH_TOKEN"); 
    }})
    .done(function(data) { 
    //console.log(data.user.user_fields.member_id_); 
    var textField = data.user.user_fields.member_id_;
    console.log(textField); 
    passVariable(textField); 
    }) 
    .fail(function(){ 
    console.log("FAILED"); 
    });

    function passVariable(textField){  
    zESettings = {
      webWidget: {
        contactForm: {
          fields: [
            { id: 'description', prefill: { '*': 'My field text' } },
            { id: 32175007, prefill: { '*': textField } }
          ]
        }
      }
    };

    };
    </script>

    <!-- Start of Zendesk Widget script -->

    widget script here 

    <!-- End of Zendesk Widget script -->
     
      </body>
    </html>
    Terms & ConditionsCookie settingsAccessibility statement