Advanced customization of the Web Widget

Have more questions? Submit a request

176 Comments

  • Thomas Verschoren

    We currently implemented this at a client of ours as follows:

    Rough idea, but you hopefully get the gist.

    0
  • Lenka Prochazkova

    Hello,

    we have an issue with how our articles are stilled in the Web Widget. The styllig for list items `<li>` is off. We get way too much space around them.

    When I comment out the `white-space:pre-wrap` that is attached to `.src-component-helpCenter-HelpCenterArticle-content ul`. The spacing disappiers and we have normal space around the list items.

    Does anyone expereince the same issue? Do you know how can we access the `white-space` property?

     

    0
  • Nicole Waxmonsky

    Hi Lenka,

    Can you write some CSS using the same selectors to overwrite that property, changing 'white-space: pre-wrap' to 'white-space: normal' ?

    0
  • Lenka Prochazkova

    @Nicole, I double checked with our developers and have been told that since the widget lives in an iframe, we can’t style those elements with normal css selectors. The styling options Zendesk offer through the api are very limited :(

    0
  • Nicole Waxmonsky

    @Lenka - Ah, that's too bad. The only other thing I can think of is to check the article in the guide editor. If someone put extra space between the list items (the text or the <li> tags) that can lead to uneven spacing in the article itself.  For example, try having your <li>text</li> on one line instead of across two.

    0
  • Fiona

    "If Chat is configured for the Web Widget, end users are automatically routed to a chat, if a chat agent is available. However, you can allow end users to choose between chatting with an agent or completing a contact form, even if a chat agent is available."

     

    How can we do this please? I'd like to show both options even if a chat agent is available.

    Thanks!

    Fiona

    0
  • Emily Koch

    Does the Web Widget support viewing or downloading files that are attached to Help Center articles without navigating to the same article in the Help Center itself? For example, if we attached a PDF to an article in Zendesk, could someone open the web widget, read the article in the widget, and see a link to the PDF attachment at the end of the article listing (similar to the link that appears for attachments in the Help Center proper)?

    0
  • Devan La Spisa

    Hello Fiona,

    So if Chat is configured for the Web Widget, end users are automatically routed to a chat, if a chat agent is available. However, you can allow end users to choose between chatting with an agent or completing a contact form, even if a chat agent is available. If a chat agent is available when the user clicks the launcher, but the agent signs off before the chat starts, the end users may see a message indicating that the agent is not available.

    The following help article should go into further detail on how to go about customizing the Web Widget to facilitate these settings.

     

    1
  • Devan La Spisa

    Hello Emily,

    So currently the web Widget, unfortunately, doesn't support viewing or downloading files that are attached to the Help Center. A workaround for this would be to embed the PDF file into the page via a cloud storage link like Dropbox. This would allow the Web Widget to pull this link into the display summary and give access to the file you were looking to share.

    Also, if you are looking to customize your Web Widget further, this article should prove helpful. Hope this workaround fits your needs and let us know if there is anything else we can assist with.

    0
  • Joy Voltenburg

    When I add two customizations to my widget (offset and title), only one will work. If I apply them individually, one at a time, then they each will work by themselves. But when I add both at the same time, one will not work.  I'm putting them in separately as two different scripts. Whichever is applied first will work and the other will not.  I've tried combining them into one script, but am unable to get either to work when done that way.

    Code for title:

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

     

    CODE FOR OFFSET

    <script type="text/javascript">
    window.zESettings = {
    webWidget: {
    offset: {
    vertical: '125px',
    mobile: {
    vertical: '50px'
    }
    }
    }
    };
    </script>

    0
  • Dan Ross

    hey Joy,

    When updating multiple parameters, you can do them in the same call. When you run it as two scripts, I imagine what you're seeing the latter of the two will be the one taking effect it's likely overwriting the first script.

    Try something like this! I think I have the syntax right, Zendesk totally butchers any attempt at code formatting and indentation. 

    <script type="text/javascript">
    window.zESettings = {
    webWidget: {
    contactForm: {
    title: {
    '*': 'Submit Support Request'
    }
    },
    offset: {
    vertical: '125px',
    mobile: {
    vertical: '50px'
    }
    }
    }
    };
    </script>
    1
  • Joy Voltenburg

    thank you! That works great!

    1
  • Yair Zamir

    Is there an equivalent to zE.activate in the new command syntax ? Is it safe to use zE.activate or will it be deprecated sometime?

    0
  • Brett - Community Manager

    Hi Yair,

    If you'd like to display the widget you can use the show command as mention in the following documentation:

    Core API

    Hope this helps!

    0
  • André Wessels

    Does anyone perhaps know if it's possible to hide the launcher label on desktop, so that the launcher essentially just displays the icon? In essence, we'd like the launcher to look like this on desktop.

    I've tried a few things, but can't get it to work :(

    0
  • Brett - Community Manager

    Hey André,

    I reached out to one of our Chat product experts and they informed me that there's only the option to hide the label for mobile through the API. Unfortunately, this will not work for the desktop. Your best option would be to use a custom image on your website to launch the widget. You'll need to create a custom script with the onClick event to show the widget show command.

    I hope this points you in the right direction!

    0
  • Justin

    Where do we place the code for some of these customizations? For example, if we want to limit search results to a specific category, do I place the widget code on a specific page AND combine it with the following? Do the two pieces of code live separately?

    <script type="text/JavaScript">
    window.zESettings = {
      webWidget: {
        helpCenter: {
          filter: {
            category: '200053794-General'
          }
        }
      }
    };
    </script>

    0
  • André Wessels

    Great, thanks so much @Brett :)

    0
  • Brett - Community Manager

    @André, happy to help!

    @Justin you should be able to enter the widget script anywhere in your theme and it should load once the page loads. We recommend including the code on the Document Head page so it loads on all pages in your Help Center.

    Let me know if you have any other questions!

    0
  • Josh Sheers

    Is it possible to add custom javascript into the widget code?

    For context:
    My company has separate support staffs for 2 main products. Only one of our support teams are utilizing Zendesk. I am trying to add some splash text to the top of the contact form to specify that this form is only for contacting support team A, and to call a separate number to get a hold of support team B.

    I have tried adding in variations on the following code:

    <script type="text/javascript">
    window.zESettings = {
    webWidget: {
    contactForm: {
    let h = '<div id="idChild"> Splash Script </div>';
    document.getElementsByClassName("src-component-submitTicket-SubmitTicketForm-formWrapper").insertAdjacentHTML('beforeend', h);
    }
    };
    </script>

    If unable to add custom javascript, is there another way to accomplish the same goal?

    0
  • Justin

    Hi everyone. This article states, "However, you can allow end users to choose between chatting with an agent or completing a contact form, even if a chat agent is available" -- how can we set this up? The widget defaults to live chat only if agents are available. 

    0
  • Thomas Verschoren

    Easily done by adding the following code below your widget code on the <head> of your site:

    <script type="text/javascript">

    window.zESettings = {

    webWidget: {

    contactOptions: {

    enabled: true

    }}}

    </script>

     

    See full options here:

    https://gist.github.com/verschoren/40787ff5dd228f7375a32b58d575443c

    0
  • Justin

    Thanks Thomas. That worked!

    0
  • Robert Johnson

    Hello, on `launcher` and using `label` we tried to eliminate text altogether preferring a simple "?".   Unfortunately, we aren't able to do without creating a lopsided appearance.   We have to keep a space in the string for it to function.   Any suggestions on how can avoid this lopsided appearance?

    0
  • Heather R

    Oh no! Are you able to add a space beforehand? :D 

    0
  • Fiona

    Currently, when you click on our help button, it only brings up the search bar - can I also make it bring up a 'contact us' button so that the person doesn't have to search for something THEN be offered the option to contact us? 

    I would also like to offer contact us and live chat at the same time (if someone is online). 

    Thank you!

    0

Please sign in to leave a comment.

Powered by Zendesk