Refreshing the Web Widget in single page applications (SPA)

Have more questions? Submit a request


  • Anders Eriksson
    Comment actions Permalink

    Solved it for loading MPWidgets;

    if (the _nRepData.MPWidgets.Data.length > 0) {
        if (typeof window.nanoRep !== 'undefined' && typeof window.nanoRep.MPWidget !== 'undefined') {

    // Else you add the MPWidgets data and load the script

  • Sumit Heda
    Comment actions Permalink

    Widget is not refreshed after the setIdentity method 

    zE(function () {
    zE.setHelpCenterSuggestions({'url': true});
    i am using this method also i added the timeout in this method call but it is not refreshed.

  • Alban Leandri
    Comment actions Permalink

    I am also trying to achieve the same thing. I have a SPA where the web widget is loaded once, at page loading only.

    Therefore, I noticed that when a user submits the ticket later on in the navigation, where the URL fragment is different than the landing page, it shows the landing page as the URL in the chat transcript after it's been closed.

    I would like to find a way to update the current URL every time the history change, with Google Tag Manager.

    How should I do? Thx

  • Riley
    Comment actions Permalink

    I'm looking for the same thing, I'm attempting to prefil custom fields in the widget. The widget does not respond to changes to this after the widget has loaded.


    Anyone have any updates on this ? 

  • Bryan - Community Manager
    Comment actions Permalink

    Hi Riley,

    I confirmed this is indeed not a current feature (ability to change custom field prefills after the page has loaded). I passed this along to the product managers of this area, however. I can't say when or even if this will be implemented. I'd keep an eye on the Web Widget Change Log area. You also have the option of making a public feature request here: Product Feature Requests and Feedback. The upside of doing that is others can add additional use-cases and upvotes to the request and it might get more attention.

    I know this may not be the answer you were looking for but wanted to let you know the above options and set expectations.

  • Jonas Carlbaum
    Comment actions Permalink

    I managed to solve this in a SPA.

    setupZendeskWidget(activate = true) {
    const currentCustomer = store.state.customersDataModel.selectedCustomer;

    window.zESettings = {
    authenticate: { jwt: store.state.appContext.initialConfig.Zendesk.Token },
    webWidget: {
    contactForm: {
    fields: [
    { id: '360000217472', prefill: { '*': } },
    { id: '360001596812', prefill: { '*': currentCustomer.projectCode } },
    { id: '360001596852', prefill: { '*': currentCustomer.organisationId } }

    const elementToRemove = document.getElementById('#zendesk-include-script-iframe');
    const elementsWhichParentsToRemove = document.querySelectorAll('#launcher.zEWidget-launcher, #webWidget.zEWidget-webWidget');

    if (!!elementToRemove)

    if (!!elementsWhichParentsToRemove) {
    Array.from(elementsWhichParentsToRemove).forEach((element) => {
    if (!!element.parentNode)

    window.zEmbed = null;
    window.zE = null;

    window.zEmbed || function (e, t) { var n, o, d, i, s, a = [], r = document.createElement("iframe"); window.zEmbed = function () { a.push(arguments) }, window.zE = window.zE || window.zEmbed, r.src = "javascript:false", r.title = "", r.role = "presentation", (r.frameElement || r).id="zendesk-include-script-iframe", (r.frameElement || r).style.cssText = "display: none", d = document.getElementsByTagName("script"), d = d[d.length - 1], d.parentNode.insertBefore(r, d), i = r.contentWindow, s = i.document; try { o = s } catch (e) { n = document.domain, r.src = 'javascript:var;d.domain="' + n + '";void(0);', o = s } = function () { var e = this.createElement("script"); n && (this.domain = n), = "js-iframe-async", e.src = "", this.t = +new Date, this.zendeskHost = "", this.zEQueue = a, this.body.appendChild(e) }, o.write('<body onload="document._l();">'), o.close() }();

    zE(function () {
    if (activate) {
    name: `${store.state.appContext.initialConfig.UserData.FirstName} ${store.state.appContext.initialConfig.UserData.LastName}`,
    email: store.state.appContext.initialConfig.UserData.Email,
    } else {


    That meant I had to add...

    (r.frameElement || r).id="zendesk-include-script-iframe" the "window.zEmbed || function"-oneliner to identify one iframe.

    So I could remove relevant elements from html, empty some global variables and re-initialize the stuff...


    Since it was kind of easy to get around this with some hacking it wouldn't be a huge thing for you to fix an official hard-reset-function. ;)


Please sign in to leave a comment.

Powered by Zendesk