Advanced customization of the Web Widget

Have more questions? Submit a request

225 Comments

  • Brett - Community Manager
    Comment actions Permalink

    This is awesome! Thanks for taking the time to share this with everyone Thomas!

    0
  • Sebastian
    Comment actions Permalink

    It looks like it's pretty hard to change more than the offered changes in the widget.

    We want to change the contact form button to make it link directly to the real contact form. The problem is that the widget is missing all the CSS and Javascript. One can theoretically use conditional fields but it looks very bad in the widget and also conditional fields do not work.

    So linking to the real contact form would be best. Can this be done somehow?

    Also the "go to the article" button on the top right side of an open article is not seen by many. Can it be changed?

    0
  • Devan - Community Manager
    Comment actions Permalink

    Hello Sebastian,

    This should be doable with enough custom code working via the Web Widget. I'll see if I can drum up some attention for you on getting some help with this but for now, here is an article that might help you get started in your endeavor.

    Introduction - Web Widget

    Best regards.

    0
  • Aleksey Kislov
    Comment actions Permalink

    How can I change field labels in contact form, specifically 'How can we help you?' label? Here is similar question: https://support.zendesk.com/hc/en-us/community/posts/115000453427-Is-it-possible-to-amend-the-labels-for-the-Contact-Us-fields-in-the-Web-Widget-, but answer points to this article, which does not cover that.

    0
  • Brett - Community Manager
    Comment actions Permalink

    Hey Aleksey,

    Can you provide a screenshot of the field you'd like to change in the widget? Are you trying to change the search placeholder that mentions "How can we help you?" If so, you can use the documentation here: Web Widget searchPlaceholder

    Let me know if that's not what you're looking for!

    0
  • Sebastian
    Comment actions Permalink

    Any news about my question about how it would be possible to link the contact form button directly to the real big contact form?

    0
  • Aleksey Kislov
    Comment actions Permalink

    Hello Brett,

    I'm talking not about placeholders but about the labels (the ones located above the fields). Like here:

    0
  • Comment actions Permalink

    Hi Aleksey,

    The field labels should be editable from the Ticket Fields menu.

    Hope that helps.

    0
  • Aleksey Kislov
    Comment actions Permalink

    Hello Jacob,

     

    What do ticket fields have to do with web widget?

    0
  • Brett - Community Manager
    Comment actions Permalink

    @Aleksey, if you'd like to change the How can we help you? text then you'll need to use the widget api which I've linked for you. I'm afraid there's no way to change this natively at this time.

    @sebastian, I did some digging on my end but I was unable to find any information on linking the web widget to an external contact form. You'd most likely need to custom code your own widget to accomplish this.

    Let me know if you have any other questions for me!

    0
  • Aleksey Kislov
    Comment actions Permalink

    @Brett, the API you've linked is about changing an input placeholder (text inside the field), and I need to change a label (text above the field). Please check my comment above for the screenshot. If it still isn't clear enough, here is a great article to help differentiate between labels and placeholders:  https://joshuawinn.com/ux-input-placeholders-are-not-labels/. Thanks.

    0
  • Brett - Community Manager
    Comment actions Permalink

    Hey Aleksey,

    Thanks for the clarification! I did some digging on my end but I wasn't able to find a way to change the label itself in the widget. The only alternative I could find would be to hide this description field and create your own custom ticket field with the preferred label you'd like to display in the widget.

    We do have an article for disabling the subject/description fields here that may be useful as well: Disabling the subject and description fields on the new request form in Help Center

    Let me know if there's anything else I can assist with.

    0
  • Mario Felix
    Comment actions Permalink

    What if we are using kotlin?instead of JavaScript ?

    0
  • Alex Zlatkus
    Comment actions Permalink

    Is there any documentation on changing the Get in touch button that appears in answer bot? Feel like the name of that is quite vague.

    0
  • Brett - Community Manager
    Comment actions Permalink

    Mario Felix I don't believe we have any restrictions when using Kotlin, however, we don't have any documentation available to provide as examples for you.

    Alex Zlatkus I did some digging and it does not look like we have an object for the AnswerBot to customize the Get in touch button. You can find more information in our AnswerBot API documentation

    Let me know if you have any other questions!

    0
  • Arno Lindroos
    Comment actions Permalink

    I ran into some problems with the customizations, leading to ill behaviour of the widget, when trying to offer language support with chat. What happens is that when widget is selected (clicked), it just decides to disappear from the page. I created a fresh theme and added the widget configured for chat only (widget settings on support side), to minimize any affects by customization. Then I added customizations to document head in Guide template, and the widget just dissappears when clicked. 

    Widget seems to accept the settings, but just does not behave correctly any more. 

    I would appriciate, if any has any information, how to avoid this (excluding dropping the language support :-)) or if anyone could review the settings below, if there is an obvious mistake in the way I have done these.

    Thanks in advance!

    Document_head.hbs (clip from inside the script-tags):

    window.zESettings = {
    webWidget: {
    color: {
    theme: '#a72c2a'
    },
    chat: {
    title: {
    '*' : 'Support Chat'
    },
    prechatForm: {
    greeting: {
    'en-US': 'Welcome to our support chat! Please select a language in which you would like to chat with us. If the chat team you wish to talk to is not available right now, you can leave a message and we will get back to by email.',
    'fi': 'Tervetuloa Support Chatiin! Valitse alta kieli, jolla haluaisit meidän vastaavan. Jos toivomasi chat-tiimi on juuri nyt tauolla (offline), voit jättää viestin, johon palaamme myöhemmin sähköpostitse.'
    },
    departmentLabel: {
    'en-US': 'Language',
    'fi': 'Kieli'
    }
    },
    offlineForm: {
    greeting: {
    'en-US': 'Our chat team is having a break right now, please leave a message and we will get back to you as soon as possible!',
    'fi': 'Chat-tiimimme on parhaillaan tauolla. Jätäthän viestin ja palaamme asiaan mahdollisimman pian!'
    }
    },
    concierge: {
    name: {
    'en-US': 'Support service',
    'fi': 'Tukipalvelu'
    },
    title: {
    'en-US': 'Lets chat!',
    'fi': 'Lets chat!'
    }
    }
    },
    launcher: {
    label: {
    'en-US': 'Chat',
    'fi': 'Chat'
    }
    }
    }
    };

    Error I see in browser console, when I click the widget looks like this:

    0
  • Arno Lindroos
    Comment actions Permalink

    As reply to my question above: Setting the concierge information was causing problems. The name parameter cannot be language supported, but breaks the widget, if tried. Use case to language support for the default name is reasonable, for example using some general name like "Company helpdesk" in different languages. This can be solved for example by setting a variable in javascript based on dynamic content before the settings, and offering that variable as concierge name in the settings then.

    0
  • YU-CHENG LI
    Comment actions Permalink

    Hi ZD community,
    Is it possible to customize the word where is in Launcher?

    Thanks in advance!

    0
  • Thomas D'Hoe
    Comment actions Permalink

    Hi Yu-Cheng Li,

    Sure, you can try to use our web widget configurator. https://widget.premiumplus.io

    0
  • Michael Fritsch
    Comment actions Permalink

    Is there a way to customize the title of a default field?

    I want to change the title of the description field "How can we help you?" to something different.

    0
  • Aleksey Kislov
    Comment actions Permalink

    Michael Fritsch, I had a similar question here: https://support.zendesk.com/hc/en-us/articles/229167008/comments/360003581074. After all the QA ping pong I had there seems to be no way of doing it: https://support.zendesk.com/hc/en-us/articles/229167008/comments/360003673893.

    0
  • Brian
    Comment actions Permalink

    Hi, is it possible to move the Web Widget's functionality into a custom UI/tab on our product's global navigation bar? The Web Widget is often covering information on the bottom-right corner so that our users cannot see such info. It's even worse if we switch to the bottom-left corner.

    Ideally, we'd like to still see the Web Widget appear, but only when clicking on a tab in the global navigation bar. If not, is there a way to change the icon/size of the Web Widget?

     

    0
  • Henry Ho
    Comment actions Permalink

    Hi,

    Would the widget send a automated confirmation email to a user who contacted us via the widget? (We've set it up so they are required to provide their email address.)

    Thanks

    Henry 

     
     
    0
  • Sebastian Juul Jensen
    Comment actions Permalink

    Hi,

    Will we ever be able to customize the chat/contact us button shape form round to square, widget shape, fonts etc ind order to make the chat feel more integrated and aligned with the given brand identity?

    Best,

    Sebastian

    0
  • Miranda Burford
    Comment actions Permalink

    Hi Sebastian Juul Jensen,

    Thanks for sharing your feedback.  I answered your question in this thread but wanted to respond here as well.  We're considering how we can bring some additional launcher & widget customisations to our Admin settings to offer more flexibility so your feedback is timely and appreciated.  Whilst I can't make any promises, I've logged your feedback & contact details.  I'll definitely reach out with any news.

    Thanks,

    - Miranda.

    Senior Product Manager, Web Widget

    0
  • Miranda Burford
    Comment actions Permalink

    Hi Henry Ho,

    Yes, there is a default trigger setup (Business rules > Triggers) to send an auto-reply on ticket creation (a ticket is created when a user submits the Web Widget contact form).  You can adjust the conditions & actions to suit your needs.

    Hope this helps!

    - Miranda.

    Senior Product Manager, Web Widget

    0
  • Miranda Burford
    Comment actions Permalink

    Hi Michael Fritsch, Aleksey Kislov,

    Apologies for the delay here.  You're right.  Unfortunately, it isn't possible to change the 'How can we help you?' label within the contact form of the Web Widget.  If you have Professional with add-on or Enterprise, then you can create a custom ticket form with the fields of your choice and display that form within the widget instead.  More info here.

    I'll definitely log your feedback and contact details.  There's no immediate plans to introduce this but will reach out if there's news.

    Thanks,

    - Miranda.

    Senior Product Manager, Web Widget

    0
  • Miranda Burford
    Comment actions Permalink

    Hi Brian,

    Apologies for the short delay here.  You can use our API to hide the Web Widget on page load and then use show to display it when the global navigation bar has been clicked.  You can also place the widget in a specific location of the page using using zESettings, https://developer.zendesk.com/embeddables/docs/widget/settings#settings-reference.

    Show: https://developer.zendesk.com/embeddables/docs/widget/core#show

    Hide: https://developer.zendesk.com/embeddables/docs/widget/core#hide

    There's also a great quick start guide on how to build your own launcher here if you'd like to go completely custom. 

    Hope that helps!

    - Miranda.

    Senior Product Manager, Web Widget

     

    0
  • Adrian Siebert
    Comment actions Permalink

    Is it possible to configure the web widget to open the Guide article in a new tab from the suggested articles list when a search is completed with the widget?

    We have found that some of the styling set by the CSS within the article is not rendering within the widget e.g. "Note" or "Important" call outs we have created and the best experience is via the guide article itself.

    This also helps us get more traffic onto our Help Centre.

    0
  • Miranda Burford
    Comment actions Permalink

    Hi Adrian Siebert,

    Unfortunately, it isn't possible to open articles directly in the Help Center from Web Widget search results.  You do need to view the article within the widget first before a link to Help Center appears (in the top-right corner).  Thanks for suggesting this!  I'll log it as a feature request and record your details.  We'll reach out if there's any news.

    Miranda.

    Senior Product Manager, Web Widget

    0

Please sign in to leave a comment.

Powered by Zendesk