Refreshing the Web Widget in single page applications (SPA)

Return to top
Have more questions? Submit a request

9 Comments

  • Anders Eriksson

    Solved it for loading MPWidgets;

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

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

    0
  • Sumit Heda

    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.


    0
  • Alban Leandri

    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

    0
  • Riley

    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 ? 

    0
  • Bryan - Community Manager
    Zendesk Developer Support

    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.

    0
  • Jonas Carlbaum

    I managed to solve this in a SPA.

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

    //https://developer.zendesk.com/embeddables/docs/widget/zesettings#fields
    window.zESettings = {
    authenticate: { jwt: store.state.appContext.initialConfig.Zendesk.Token },
    webWidget: {
    contactForm: {
    fields: [
    { id: '360000217472', prefill: { '*': currentCustomer.name } },
    { 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)
    elementToRemove.remove();

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

    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=document.open();d.domain="' + n + '";void(0);', o = s } o.open()._l = function () { var e = this.createElement("script"); n && (this.domain = n), e.id = "js-iframe-async", e.src = "https://assets.zendesk.com/embeddable_framework/main.js", this.t = +new Date, this.zendeskHost = "kundportal.zendesk.com", this.zEQueue = a, this.body.appendChild(e) }, o.write('<body onload="document._l();">'), o.close() }();
    //https://developer.zendesk.com/embeddables/docs/widget/api?_ga=2.237689416.919317643.1519374362-2069821356.1514972961

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

     

    That meant I had to add...

    (r.frameElement || r).id="zendesk-include-script-iframe"

    ...in 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. ;)

    0
  • Phan Hùng Cường

    Hi,Jonas Carlbaum , I have problem like u about widget chat in SPA. can u give me an email to discussion ? 

    0
  • Sheila Lucas

    Hello,

    We're having trouble filtering web widget results on the fly in our single-page application. It appears filters have to be configured in the settings passed to the web widget object, but we're not regenerating the widget on each page load, so we can't target specific labels or articles on specific pages. Is there an API command that can be used to set filters on a page-by-page basis?

    0
  • Chris Stock
    Community Moderator

    Hi Sheila Lucas, I don't think it's possible to call the zESettings, multiple times like you can with helpCenter:setSuggestions. Setting the suggestions based on the url and having a single filter for the application may work just as well though, unless you have content that you absolutely don't want people to be able to find when they're on particular pages.

    0

Please sign in to leave a comment.

Powered by Zendesk