Advanced customization of Web Widget (Classic)

Return to top

74 Comments

  • Mark Wiles

    I've been looking through documentation, but I have yet to find a way to suppress or change the "Top Results" text above the article titles.  Did I overlook this, or does anyone have ideas?  Thanks!

    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
  • 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).

    1
  • 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
  • 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
  • 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
  • Mark Wiles

    Perfect - much appreciated!

     

    0
  • Mark Wiles

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

    0
  • Kharlo Reboja
    Zendesk Customer Care

    Hello Mark,

    Thanks for reaching out. Unfortunately, the ability to edit this is outside of Zendesk's native features. With that said this could be changed through custom code.

    0
  • Mark Wiles

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

     

    0
  • Tulasi

    How to add specific colour to header title ?

    0
  • 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
  • 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
  • Tulasi

     

    How to set by default one value to product dropdown.

    0
  • Thomas (internalnote.com)
    Community Moderator
    Zendesk Luminary

    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/

     

    1
  • 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
  • Brett Bowser
    Zendesk Community Manager

    Hey Thibaut,

    I double checked with one of our web widget experts and it doesn't look like there's a way to accomplish what you're looking for at this time.

    I'd recommend cross-posting this in our Feedback - Ticketing System (Support) topic and I'll be sure to share your thoughts with our Product Managers.

    Thanks for taking the time to share this with us!

    0
  • Thibaut

    Hello Brett,

    That's what I thought, unfortunately.

    I just created a new topic.

    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
  • Ifra Saqlain
    Community Moderator
    Zendesk Luminary
    Most Engaged Community Member - 2022
    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
  • Mordechai Hammer

    Hello!

    I've got a question regarding customizing either the (1) message bubble color or (2) the "Get in touch" button styling.


    I've consulted the Settings Reference for the Web Widget (classic), which has given me a wonderful starting point, but I was wondering if either of the 2 elements above are targetable objects via the JS in that Settings Reference

    They currently both are taking their values from the Theme Color setting, which is really a problem as one has near-black text on it, and the other is overlaid on top of the widget's BG color (white). Whatever algorithm the widget uses to adjust colors does not appear to be active... Is there a way to force the accessibility color algorithm?

    If not, finding a color that will be accessible in both circumstances is quite the challenge, so 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 for your time. 

    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
  • 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

    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
  • Maky

    Hi Tulasi

    Also  here:

    Maria

    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 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
  • 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
  • Christopher Kennedy
    Zendesk Developer Advocacy

    Hi Ntsako,

    This can be accomplished by first hiding the widget on the page and then showing it using the widget's Javascript APIs once the custom button is clicked.  We demonstrate this in more detail in Quickstart – Creating a launcher for the Web Widget (Classic).

    Thanks,

    0
  • Brianne Reinhardt

    When using the filter, if I filter based on label is it an 'AND' filter or 'OR' filter. Meaning, if I include labels: Label1 and Label2. Do the results limit to only articles that have both Label1 and Label2, or limit to any articles that have either Label1 or Label2.

    0

Please sign in to leave a comment.

Powered by Zendesk