updateSettings API for prefilling fields

9 Comments

  • Thomas Verschoren
    Comment actions Permalink

    Hey,

     

    Your code is correct but that seems to be a bug in the updateSettings API for the Widget

    Anything other than "fields" gets updated, but if you call fields, or ticketForms >> fields it does not work.

    ---

    If you call the code directly in zESettings it works

    <script type="text/javascript">
      window.zESettings = {
        webWidget: {
          fields: [
    {
    id: 'description',
    prefill: {
    '*': 'My field text'
    }
    }
    ] } }; </script>
    0
  • Grant Lonie
    Comment actions Permalink

    Hello, this does not resolve the issue. Doesn't seem to be a way to update prefill for custom fields. See this issue as reference.

    0
  • Joey
    Comment actions Permalink

    Thanks for the link to the other issue, Grant. I will be looking into it.

    0
  • Melle
    Comment actions Permalink

    Any news on this bug? I'm using the https://support.zendesk.com/hc/en-us/community/posts/360036554414/comments/360009497773 script and therefore I cannot use window.zESettings. I want to show an ticketform and therefore need to use the below code with the updateSettings api which is not working.

    webWidget: {
    contactForm: {
    ticketForms: [{ id: xxxxxxxxxx }]
    }
    }

    0
  • Bryan - Community Manager
    Comment actions Permalink

    Hello Melle,

    Widgets are typically an already defined element on your HTML page (IOW, you don't need to load them dynamically). That sample was just an example of how to load a widget dynamically. Also, the window.zeSettings object should be declared before the widget is instantiated. 

    If you're wanting to dynamically update available ticketForms, that cannot currently be done with updateSettings. Available ticketForms can only be set on the initial load of the widget. Once set, they cannot be changed until the HTML page is reloaded.

    As a side note, this is a great free resource to explore different widget options: https://widget.premiumplus.io. It lets you try things out and generates the corresponding webWidget settings.

    If I'm missing something, please let me know and post additional details of your use case and any Console error messages. Thanks!

    0
  • Melle
    Comment actions Permalink

    Hi Bryan,

    First of all; thanks for the fast response!
    I'm using that sample because I want to load the widget dynamically (on a click) and not on every pageload since the size of the scripts is almost ±3MB large.

    Since the window.zeSettings can't be used with dynamically loading, I need to use the updateSettings. On the page https://developer.zendesk.com/embeddables/docs/widget/core#updatesettings it says """It can update multiple settings at once. However, it cannot update the authenticate setting since authentication occurs during page load, not during Web Widget runtime.""". So I was concluding that it can change every setting except for the authenticate, but my conclusion seems to be wrong.

    Is there an overview what settings can be changed with the updateSettings (and so what can be not changed). And do you know if in the future it will be possible to update "ticketforms" with the updateSettings? Thanks!

    0
  • Bryan - Community Manager
    Comment actions Permalink

    That makes sense given the size of the widget. There is an active, focused effort to reduce that download size.

    Also, the documentation does seem to imply that any widget setting is fair game to update on-the-fly. Unfortunately that's not true. I'm going to see if the documentation can be made more clear on that. Just to let you know, contactForm/prefill settings cannot be set with updateSettings either right now.

    I'll work with our documentation group to make what's available and not available more clear. Thank you for bringing up this point!

    1
  • Diego Hernandez
    Comment actions Permalink

    Hi Bryan, thanks for jumping in and clarifying the ambigous bits in the Widget API documentation. I also ran into similar issues and found this thread. 

    I meant to have the widget display only a specific form with ticketForms , and the specific form ID as value and even tried to check for changes by setting a default text with selectTicketForm but to no avail; the Widget still presents the user with a selection of all available forms (as per image - Please select your issue).

    I was not sure if it was a syntax error on my code behalf but reading here that these settings are not necessarily updated per Settings constructor, I am doubtful. Are there any news on this? 

    I tried both with window.zESettings  and

    zE('webWidget', 'updateSettings', {

    but to no effect.

    When you wrote Also, the window.zeSettings object should be declared before the widget is instantiated. 

    My guess is that I am executing in the correct order, since I invoke zE('webWidget', 'show'); only afterwards

    Below the code sample, any insights possible?

    thanks,

    Diego

     


    //Set up Widget ContactForm
    window.zESettings = {
    webWidget: {
    contactForm: {
    ticketForms: [{ id: 360000126798 }],
    selectTicketForm: { '*': 'Put your end-user instruction here' },
    fields: [{ id: 'description', prefill: { '*': 'Dont work' } }]
          }
        }
    }; 

    // Launch Web Widget
    zE('webWidget', 'show');
    zE('webWidget', 'open');

    0
  • Bryan - Community Manager
    Comment actions Permalink

    Hi Diego Hernandez -- I think you're on the right track. I tried your code (changing just the ticket form ID) in a very plain web page and it worked as expected. If I specified just one ticket form, that form came up immediately. If I specified two, then I was offered a choice to select which one. The prefill also worked. This is the sample code I ran (change ticket form ID and widget snippet to your own):

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    </head>
    <body>
    <script>
    window.zESettings = {
    webWidget: {
    contactForm: {
    ticketForms: [{ id: 308528 }],
    selectTicketForm: { '*': 'Put your end-user instruction here' },
    fields: [{ id: 'description', prefill: { '*': 'Dont work' } }]
    }
    }
    };
    </script>
    <!-- Start of your_subdomain Zendesk Widget script -->
    <script id="ze-snippet" src="https://static.zdassets.com/ekr/snippet.js?key=c48686f2-86f2-86f2-86f2-86f286f27160"> </script>
    <!-- End of your_subdomain Zendesk Widget script -->
    <script>
    // Launch Web Widget
    zE('webWidget', 'show');
    zE('webWidget', 'open');
    </script>
    </body>
    </html>

    If your HTML page is more involved, I'd try instead running the widget on a simplified page (like the above) in a tool such as jsbin.com and see what happens. If it still doesn't work, you'll want to  submit a ticket, so that your account can be looked at in more detail privately.

    1

Please sign in to leave a comment.

Powered by Zendesk