Advanced customization of the Web Widget

Have more questions? Submit a request

181 Comments

  • Thomas Verschoren
    Comment actions Permalink

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

    Rough idea, but you hopefully get the gist.

    0
  • Lenka Prochazkova
    Comment actions Permalink

    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
    Comment actions Permalink

    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
    Comment actions Permalink

    @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
    Comment actions Permalink

    @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
    Comment actions Permalink

    "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
    Comment actions Permalink

    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)?

    1
  • Devan - Community Manager
    Comment actions Permalink

    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 - Community Manager
    Comment actions Permalink

    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
    Comment actions Permalink

    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
    Comment actions Permalink

    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
    Comment actions Permalink

    thank you! That works great!

    1
  • Yair Zamir
    Comment actions Permalink

    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
    Comment actions Permalink

    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
    Comment actions Permalink

    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
    Comment actions Permalink

    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
    Comment actions Permalink

    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
    Comment actions Permalink

    Great, thanks so much @Brett :)

    0
  • Brett - Community Manager
    Comment actions Permalink

    @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
    Comment actions Permalink

    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
    Comment actions Permalink

    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
    Comment actions Permalink

    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
    Comment actions Permalink

    Thanks Thomas. That worked!

    0
  • Robert Johnson
    Comment actions Permalink

    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
    Comment actions Permalink

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

    0
  • Fiona
    Comment actions Permalink

    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
  • Molly
    Comment actions Permalink

    Hey Fiona!

    Do you still want them to be able to search? If so, there's not a way currently to offer multiple contact options and the ability to search. However, you can add in multiple contact options. See this section: Offering end-users multiple contact options

    Otherwise, you can also turn off the Help Center Search entirely in your widget settings and just give them the option to chat or leave a message if you're offline.

    0
  • Thomas Verschoren
    Comment actions Permalink

    For all of you having trouble writing code, or if you want a quick and easy way to test out what all the customisation options do:

    I build a web tool that generates the necessary custom code for the available changes you can make.

    https://widget.premiumplus.io

    5
  • Dave Jones
    Comment actions Permalink

    Wow, what a brilliant tool and valuable contribution to this thread. Thank you for taking the time to create and share this, Thomas!

    0
  • Thomas Verschoren
    Comment actions Permalink

    Thanks!

    0

Please sign in to leave a comment.

Powered by Zendesk