Advanced customization of Web Widget (Classic)

Return to top

45 Comments

  • Thibaut

    Hello,

    I'm looking to change two things that don't make sense to me on the Web Widget.

    1 / When the Web Widget is displayed in full screen on mobile, I think it would be better to change this icon. More understandable.

    2 / Also on mobile, I would like to add an "OK" or "Search" button, something like that, in the search bar. Few people are familiar with having to press the "Return" key on their smartphone keypad to validate a form. When I watch my visitors sessions with HotJar, I have approximately 20% of people typing their search but failing to validate the form ...

    Guess it is not possible to achieve this with custom code? Don't you think these are good ideas?

    Thanks.

     

    2
  • Alejandro Colon

    I was in the process of writing up how to do exactly this. 

    Tip: Hide top suggestions on Web Widget

    Let me know if you have any issues.

    1
  • Karl Bagci

    We want to add a hyperlink to link to our docs site (not hosted in Zendesk KB) in our Zendesk Web Widget (classic). Any ideas if this is achievable? 

    1
  • Miranda Burford
    Zendesk Product Manager

    It isn't currently possible to change the font colour of the header title.  Only the background colour of the header can be customised at this stage.  I'll log this as a feature request and we'll consider implementing it in the future.

    Thanks,

    - Miranda.

    1
  • Mark Wiles

    Great to hear, Alejandro!  @...   Sorry, but when I click your link it says "oops, you're not authorized to access this page" even though I'm logged in.  Thanks!

    0
  • Mark Wiles

    Thank you for your quick response, Miranda.  We have been experimenting with ways to provide shorter answers to questions . . . so short that the title IS the answer.  If we can constrain the list of returned articles down to 1, and either suppress "Top results" or just relabel it as "Answer", then it feels more like a direct answer to their question rather than a list of search results.

    I'd welcome any guidance you have (including if you think this approach is not advisable).

    0
  • Johnny Test

    Is there any way to change the title on the contactOptions view? I do not see anything documented and only see screenshots with "Help" as the text.

     

     

     

    0
  • Ntsako Masinge

    Hi,

    We have a customer that has a fixed footer , and wants the chat icon within a button format... is there a HTML code that I can try in order to make this happen ? 

    0
  • Christine
    Zendesk Engineering
    Hi Karl, currently it is not possible to add a hyperlink text that links to an external URL using the Web Widget. For security reasons, the widget strips HTML from input data before it’s rendered. Thus, the anchor tag is missing and the link is just plain text. Although you can build a custom widget using the Web SDK to achieve this. 

    If you have some time, I recommend that you start a post about this in our Product Feedback page. Our Product Managers actively monitor our feedback threads, and conversations with high user engagement ultimately get flagged by the team for roadmap planning. You can create a new post here: Feedback - Chat and Messaging (Chat) using the  Product Feedback Post Template.
    0
  • Miranda Burford
    Zendesk Product Manager

    Hi Jiro Hidaka,

    Thanks for your question!

    When you say "in the red section", I'm assuming you mean where you've added the squiggly line and not in the widget header?  Unfortunately, it isn't possible to insert a text block where you have the squiggly line but you can use an API to customise the content in the widget header.  More info here

    - Miranda.

    0
  • Miranda Burford
    Zendesk Product Manager

    Hi Thiago Lazier,

    Is there a way to offset the launcher position (like using the offset param, but for the launcher, not the chat window itself) without having to create the entire launcher from scratch and setting it's position?

    At the moment, the offset API moves the launcher AND the chat window.  There is no way to just adjust the launcher alone.  Do you have a screenshot which shows what you're hoping to achieve?  I'd be keen to see so I can record this as a feature request for future consideration.

    Thanks,

    - Miranda.

    0
  • Maky

    Hi Tulasi

    Also  here:

    Maria

    0
  • Thiago Lazier

    Hello Miranda Burford

    Thanks for your quick reply!

    This is what we currently have in our design:

    As you can see, when we have the "Compare" window open, the Chat Button overlaps it by a few pixels.

    What we're trying to do is offset it about 20px rightwards, so it won't be on top.

    Thanks a lot!

    - Thiago

    0
  • Brianne Reinhardt

    Eric Nelson Thanks, that's helpful!

    0
  • Jaïs Pingouroux

    Dear Miranda,

    Thanks for your answer. I didn't have the chance to try the messaging experience yet, because it requires Agent Workspace, which I just disabled because I wasn't satisfyied by the poor Knowledge Base interaction (article suggestion is less good than with regular Knowledge Capture App, plus there's no integration of the nice features offered by KCapture such as flag, the stats of deflection, etc.).

    I'll think about it and see if I shall reenable it.

    Thanks!

    0
  • Miranda Burford
    Zendesk Product Manager

    Hi Jais!

    Thanks for your question!  Unfortunately, there isn't a setting available to view help articles within a browser window, instead of the widget itself.  I'll lodge this feedback on our side and we'll consider it in the future.

    Have you considered transitioning across to our messaging experience?  By default, within messaging, help articles are viewed within a browser (not within the widget itself).

    Thanks,

    - Miranda.

    0
  • Jaïs Pingouroux

    Hi !

    Is there a setting that prevents the selected article from being previewed in the widget, opening the article in a new page instead?

     

    0
  • Ifra Saqlain
    Community Moderator
    Most Engaged Community Member of The Year - 2021

    Hi Laura, 

    I think the shared code snippet in this article, add to your external website script file and customize by the instructions:

    https://support.zendesk.com/hc/en-us/articles/115010352968

     

    Also this one:

    https://support.zendesk.com/hc/en-us/articles/115009692388-Configuring-components-in-the-Web-Widget

     

    You can try once.

     

    Thank You

     

     

     

    0
  • Laura Mirto

    Hi, 

    We use the same chat account for our Zendesk Knowledge Base and an external website. Is there a way to hide a chat field for our chat widget for just the external website?

    Thank you,

    Laura 

    0
  • Thomas Verschoren
    Community Moderator

    Hey,

     

    It can be done like so:

    <script type="text/javascript">
      zESettings = {
        webWidget: {
          contactForm: {
            fields: [
              { id: 123456, prefill: { '*': 'value' } }
            ]
          }
        }
      };
    </script>

    With 123456 the ID of the custom field and value the chooses option (if it's dynamic content use the underlying tag)

     

    See also:

    https://developer.zendesk.com/embeddables/docs/widget/settings#fields 

    For more customisation options try out https://widget.guide/demo/

     

    0
  • Tulasi

     

    How to set by default one value to product dropdown.

    0
  • Mark Wiles

    Perfect - much appreciated!

     

    0
  • Miranda Burford
    Zendesk Product Manager

    Based on the theme colour selected, we automatically choose whether a font colour of black or white is more appropriate based on the contrast ratio (in order to meet Accessibility standards).  

    - Miranda.

    0
  • Alejandro Colon

    Not sure what is going on there but here is the GitHub link https://github.com/Ajhad1/Zendesk-Customizations/tree/main/Web-Widget/Hide-Top-Suggestions-Title

    0
  • Miranda Burford
    Zendesk Product Manager

    Hi Mordechai Hammer,

    Apologies for the delay in my reply.  Appreciate your feedback.

    Is there a way to force the accessibility color algorithm?

    There isn't a way to do this right now but agree with your feedback.  I'll log this on our side for future consideration.  We know this is an area that we need to improve and hope to dedicate some time to perfecting the colour matching algorithm in 2022.

    I'd like to be able to control one or both individually, as well as potentially the hover styling for the "Get in touch" button.

    Thanks!  I'll log for future consideration as well.

    - Miranda.

    0
  • Miranda Burford
    Zendesk Product Manager

    Hi Mark,

    Unfortunately, it isn't possible to customise the 'Top results' string today.  I'll log this as a feature request on our side for future consideration.  Out of interest, what were you hoping to change this string to?

    Thanks,

    - Miranda.

    0
  • Tulasi

    How to add specific colour to header title ?

    0
  • Mark Wiles

    Thanks @kharlo!  I appreciate your quick feedback and note that at least we could accomplish via custom code.

     

    0
  • Jiro Hidaka

    Hello,

    Is it possible to add a block of text to appear on one of the Ticket Form when viewing it inside the Web Widget?

    I am able to add some text dynamically via javascript from script,js of the theme we are using but this doesn't work on the web widget unfortunately.

    We would like to add text in the red section:

    Thank you!

    0
  • Mark Wiles

    Hi, does anyone know if we can edit this text (image attached)?

    0

Please sign in to leave a comment.

Powered by Zendesk