Advanced customization of the Web Widget

Have more questions? Submit a request

181 Comments

  • Erica Wass
    Comment actions Permalink

    @meirav, You can add Help Center functionality to your Web Widget and use Contextual Help to suggest articles. You can add external links to your Help Center article and the widget will open those links in a new tab.

    0
  • Zac
    Comment actions Permalink

    For the Contact Options component: if Chat is offline, will Contact Options still be visible, or will it default to the Contact Form?

    0
  • Erica Wass
    Comment actions Permalink

    @zac If there isn't a chat agent available when the end user clicks then it will just offer the contact form. If there is a chat agent available when the end user clicks but the agent availability changes between the click and the end user's selection, a message will appear on the chat line that says "Chat is unavailable" that will switch to "Live Chat" when an agent becomes available again. The text is customizable

    0
  • Joshua Bentley
    Comment actions Permalink

    @erica I love this thread. Thanks for all the great help and suggestions. One question I have is whether or not you can add text to the contact form. For example, something above the Name field that gives all of your contact options. Or, better yet, maybe something in the web widget where I could put that information on the widget's search results page?

    Example:

    1
  • Amr Selim
    Comment actions Permalink

    Hi guys
    Here's my widget on the staging server https://petmapz.staging.wpengine.com/ 

    1. I want users to search for a possible answer first then if there is no possible answer they get a button (or link) to submit their question (submit a ticket) right there on the widget. I can't find this part here on the site.
    2. Is it possible to make the view more button take the user to the portal (guide)?
      Or display that link instead of the view more. 
      How can I do that?

    @Erica Wass , Eager to hear from you.

    Thank you

    0
  • yaniv bussi (‫יניב בוסי‬‎)
    Comment actions Permalink

    Hi,

    I just found a new bug in Firefox Browser when adding .setLocale('he') rtl language.

    html css is completely erased after adding the <script> to switch language and causes the widget structure to look weird, I know Firefox is not near Chrome % of users but it is still Top Browser, Users via FF now get poor service experience, how can  i prevent this?

    Here's Example:

    Thank you.

    Yaniv.b

    0
  • Sean Crownover
    Comment actions Permalink

    Does the help text color really have to be the same as the widget color?  Seems like they are linked which as a web designer makes no sense at all to me.  When I change my widget color, all the text after entering a question is colored the same as the widget?  Is it possible to have a separate color, suitable for reading than the widget color itself?

    0
  • Erica Wass
    Comment actions Permalink

    @joshua Thanks so much for writing. We don't currently have that available but I have made a note of the desire to include additional contact information. You have a few other options, in the meantime that could help.
    ** You could also use contact options in your Web Widget which would allow the end user to choose between contact form and chat (then you wouldn't need the email address listed).  
    ** You could also add an article to the results list called "Call us at ####" and you could include that article by default as part of contextual help zE.setHelpCenterSuggestions
    ** You could also add custom text where it says "Help" at the top of the search box to something like Help (or call ####). 


    0
  • Erica Wass
    Comment actions Permalink

    @amr  Thanks for writing. If you turn off contextual help the end user will only see a Help Center search box. The link to the Help Center from the Web Widget is in the article itself "View original article." I'm be curious to learn more about the goals underlying your request.  

    0
  • Erica Wass
    Comment actions Permalink

    @Sean:
    Thanks for writing. That's not currently planned but I'm going to make a note of the request. Do you have an example of what you've got versus ideally what you'd like that I can link up? 

    0
  • Nate Legakis
    Comment actions Permalink

    We would love to have the web widget form load in the middle of the page and have the window taller so that there is no vertical scrollbar.  Is there anyway to do this without adding some Javascript or jQuery code that waits for the iframe code to load and then changes the CSS?

    0
  • Nate Legakis
    Comment actions Permalink

    The following code works great to offset the widget on desktop machines.

    <script type="text/JavaScript">
    window.zESettings = {
      webWidget: {
        offset: { horizontal: '100px', vertical: '150px' }
      }
    };
    </script>

    However, I would like the Feedback widget budget to stay in the corner of the screen and to just offset the widget form that appears after the button is clicked.  Is there a way to do this?

    0
  • Jessie Schutz
    Comment actions Permalink

    Hey Nate! I'm checking with our Community Moderators to see if they have any input on this for you.

    0
  • Dana Fine
    Comment actions Permalink

    Hello,

     

    Our use case is that we have several different ticket forms based on client.  Is it possible in the web widget to enable the correct ticket form based on organization or account?

    Thanks,

    Dana

    0
  • Antonio Canabrava
    Comment actions Permalink

    Hello,

    I'm facing the same issue as here and here. After closing the chat, it's unable to open. I'm using zE.activate, tried with hideOnClose true and false, none of them seem to work. Do you have any idea how to solve this issue?

    Thank you,

    Antonio

    0
  • Comment actions Permalink

    Hi Antonio and the rest who face this issue,
    Let me know how this behavior works for you on customized button,

    <script>

    // Zendesk Web Widget script here.......

    zE(function() {
      zE.hide();
    })

    function show() {
      zE.show();
      zE.activate();
    }
    </script>

    Then you trigger the function show() using your customized button or text.

    <button onclick="show()">Click me!</button>

    or

    <img href="javascript:show()" src="image.com"/>


    This would be:

    1. the widget would be hidden on load

    2. if the custom button is pressed, it would change the widget from hidden to show, then it will also pop-up the chat window using zE.activate();


    If your Help Center is enabled the zE.activate would launch the help center search, However if a chat is already ongoing, it would activate the Chat window instead.


    I Hope this helps.

    Thanks to

    Ramwell Claudio (Zendesk Support)

    0
  • ashwin Indore
    Comment actions Permalink

    Thanks Yaniv for sharing this information. I tried the solution but it is not working for me. When I apply this solution and click on chat link, the widget blinks once and then disappears totally.

    Please keep posting if you get any other update from Zendesk. Thanks in advance!

    1
  • Nicole - Community Manager
    Comment actions Permalink

    @Dana - 

    Yes, it's possible to do that, though you'll have to write some javascript to enable it. You can find more information on what that would look like in this section of our developer documentation. 

    0
  • Tri Ardini
    Comment actions Permalink

    Hi guys,

    can I show more than 3 articles top suggestion on web widget?

    Thanks

    0
  • Nicole - Community Manager
    Comment actions Permalink

    Hi Tri - 

    Have you enabled the "view more" button? There isn't really a way to surface more than 3 suggestions, but that button does allow users to click in to additional results. 

    0
  • Andy Whitlow
    Comment actions Permalink

    How do I add multiple settings to the contact form. I can add 'Subject' and 'Title' separately but when I add them both, neither of them appear.

    1
  • Tri Ardini
    Comment actions Permalink

    @Nicole thanks for reply. yes I have enabled the "view more" button, but I think thats only works for search result, not suggested article on help center widget.

     

    Hi @yaniv and all.

    I have follow your instruction above. I face another problem, for the first time user click the custom button, the widget window appear, but after I minimize the widget window and click the button again, the widget window not show. do you face the same problem?

    Thanks

    0
  • Daniel Blanco
    Comment actions Permalink

    Hello,

    Our use case is somewhat similar to @Dana Fine's: we have a few important customers who would prefer we not direct their users to our helpcenter (because they have their own internal organization helpcenters), though for the vast majority of our customers have in-app access to our helpcenter would be really great.

    So I'm wondering if it's possible configure the web and mobile widgets to be suppressed/hidden from just a few, specific organizations?  

    Thank you

    1
  • Shin
    Comment actions Permalink

    Try using the below. It works for me. Am able to open the chat window again upon clicking the button. 

    <a href="javascript:zE.show();zE.activate();">Chat with Us</a>
    0
  • Enrique G. Albamonte
    Comment actions Permalink

    @Andy thank you for your reply.

    Keep in mind to have the new fields you create (Admin-Manage-Ticket fields) visible and editable as this article says.

    Once they're visible/editable you can add them within the widget from "Admin-Channels-Widget".

    Hope this helps!

     

    0
  • Andy Whitlow
    Comment actions Permalink

    @Enrique Albamonte

    Thanks for reply but this doesn't help.   I can make change one at a time, however if I want to make two changes e.g.change title AND add Subject field, neither will appear.  Each will appear when added as a single change but when two changes are made neither will appear.

    0
  • Marci Abraham
    Comment actions Permalink

    Is there a way to use any of these options to change the text of the "View original article" button? 

    There is a way to remove the button (here) but I don't see any way to change the text, as described for other buttons. I tried applying the text customizations for other features to this button, but so far nothing worked. Either I'm doing it wrong, or it's just not supported.

    Another option for my case is to "inject" a button into each article that is displayed in the widget. I can't use the article page template for this, as the widget does not use the template, just the article content. If I want to inject the same button on every page, it has to be done on the fly.

    Any help would be appreciated!!

    0
  • Glen
    Comment actions Permalink

    @Daniel This would require some personal customization but is certainly possible.  I would encourage you to use the Web Widget API to hide and then show your widget.  Details on how to use the hide API can be found here:

    https://developer.zendesk.com/embeddables/docs/widget/api#ze.hide

    Details on how to use the show function can be found here: 

    https://developer.zendesk.com/embeddables/docs/widget/api#ze.show

    0
  • Andrew Warner
    Comment actions Permalink

    Hi all, 

    Does anyone know if it's possible to change the default font type in the Widget? We'd like to change the entire font face used. 

    We would also like to be able to open an article in a new window when clicked rather than open it in the widget. 

    Thanks in advance. 

    0
  • Jessie Schutz
    Comment actions Permalink

    Hey Marci!

    I would think you'd be able to do with some custom Javascript, but let me check with some of our coding gurus to verify!

    0

Please sign in to leave a comment.

Powered by Zendesk