Pre-filling custom fields in a widget doesn't work

Question

No longer can pre-fill custom fields as follows:

window.zESettings = {
  "webWidget": {
    "contactForm": {
      "fields": [
        {
          "id": 360009742832,
          "prefill": {
            "*": "372"
          }
        },
        {
          "id": 360009742852,
          "prefill": {
            "*": "MIT Design Thinking - Oct 18"
          }
        }
      ]
    }
  }
}

Update: Created two pens that demonstrate the issue: https://codepen.io/ovvn/pen/qMXeEv, https://codepen.io/ovvn/pen/vzJoXO.

Can you include a link to the page where you have this implemented? I just tested on my site and it is working just fine - http://www.hotelafrica.co/widget. See the Description and Course ID fields. — Jimmy Long, Sep 05 '18 at 06:32
Just turned the temp url url off, here's another one http://930d5e1f.ngrok.io/ — Osman Mazinov, Sep 05 '18 at 17:04
@Jimbob ok, created two separate pens which are exactly the same except for account keys https://codepen.io/ovvn/pen/qMXeEv, https://codepen.io/ovvn/pen/vzJoXO. In the first pre-filling doesn't work at all, in the second it works, though I need to go back and select an issue again, only then description and course id are displayed. — Osman Mazinov, Sep 06 '18 at 07:29
Maybe it doesn't work when there're more than 2 custom ticket fields — Osman Mazinov, Sep 06 '18 at 07:49
definitely weird about working second time and not first time. I wouldn't think it would be affected by the number of custom fields. Did you try submitting a support ticket yet? — Jimmy Long, Sep 07 '18 at 03:20
Yes, I did. Also, created an issue here https://support.zendesk.com/hc/en-us/community/posts/360004286348-Pre-filling-custom-fields-in-widget-doesn-t-work — Osman Mazinov, Sep 07 '18 at 06:46

score 3 · Answer 1 · answered Jun 25 '19 at 11:45

For other people stuck on issues with prefilling fields, I had the same problems and got it working by loading the prefill settings separately, instead of in the zESettings. As described here: /embeddables/docs/widget/core#prefill

So basically, you make 1 script-tag to use window.zESettings for settings other than contactForm fields:

<script type="text/javascript">
  window.zESettings = {
    webWidget: {
    position: {
      contactForm: {title: {'*': 'Submit an issue'}
    }
  };
</script>

And another script tag to load zE('webWidget', 'prefill', { your field settings here });

<script type="text/javascript">
  zE('webWidget', 'prefill', {
    name: {value: 'your name'},
    email: {value: 'some email'},
    description: {value: 'Add a description'}
  });
</script>

You will need to add a delay to the prefill settings though, because 'zE' doesn't exist before the widget is actually initiated. There's probably a better way but I've already spent way more time on this than I wanted. If I hear back from Zendesk support with a better solution, I'll update this post accordingly.

Jimmy Long · Answer 2 · 2018-09-07T03:21:16.683

Not sure if it makes a difference, but I have it working and I don't include window, and I also don't have quotes around the objects in zE.settings. My sample below only works after selecting the form, hitting the back button, and selecting the form again -

window.zESettings = {
  webWidget: {
    contactForm: {
      ticketForms: [
        {
        id: 488608,
        fields: [
          { id: 'description', prefill: { '*': 'My field text' } },
          { id: 360000325513, prefill: { '*': '4283923' } }  
          ]
        },
        {  
          id: 360000101663,
          fields: [
            { id: 'description', prefill: { '*': 'My field text' } },
            { id: 360000325513, prefill: { '*': '4283923' } }
          ]
        }
      ]
    }
  }
}

Thanks, don't think it has something to do with quotes or window though, considering the fact it worked just fine before. — Osman Mazinov, Sep 05 '18 at 07:29

Pre-filling custom fields in a widget doesn't work

2 Answers2