Configuring components in the Web Widget

Have more questions? Submit a request

33 Comments

  • Joana Crisostomo
    Comment actions Permalink

    What are the fields that are included in the Contact form by default, if no custom fields are added?

    0
  • Nicole - Community Manager
    Comment actions Permalink

    Hey Joana, here's what the default ticket form settings look like: 

    0
  • Joana Crisostomo
    Comment actions Permalink

    Thanks @Nicole. 

    So if I understand correctly, when the end-user sees the web widget window in our website, the default fields they'd have to fill in would be just subject and description?

    0
  • Nicole - Community Manager
    Comment actions Permalink

    that's correct, unless you make other fields required. 

    0
  • Sonia Radaelli
    Comment actions Permalink

    Why I cannot see the option "Ticket forms" ?

    I have a Legacy plus version

    Thanks 

    Sonia

    0
  • Nicole - Community Manager
    Comment actions Permalink

    Hi Sonia, 

    The Ticket Form option is only available to customers on the Enterprise plan, or the Professional plan with Productivity pack. 

    0
  • Julija
    Comment actions Permalink

    Hey there can you advice please, we would like to have same help button as Zendesk has. I mean hanging on a side.

     

    I have been looking for some code lines and rules, but no success regarding that.

    please advise, if this is sharable info :)

    0
  • Jessie Schutz
    Comment actions Permalink

    Hi Julija!

    Can you be more specific about where you're seeing this tab? That'll help me give you the right information. :)

    0
  • John E. Parra J.
    Comment actions Permalink

    Hi, We are trying use the prefill option of zendesk settings but it not work, we did use the following code:

     

    window.zESettings = {
    webWidget: {
    chat: {
    suppress:true
    },
    helpCenter: {
    suppress:true
    },
    contactForm: {
    fields: [
    { id: 123456, prefill: { '*': 'b'} },
    { id: 1237,prefill: {'*': 'f'}},
    { id: 1356,prefill: {'*': 'g'}},
    { id: 14689,prefill: {'*': 'h'}} 
    ],
    ticketForms: [
    {
    id:123547}
    ]
    }
    }
    };
    0
  • John E. Parra J.
    Comment actions Permalink

    and this another form

    window.zESettings = {
    webWidget: {
     
    chat: {
    suppress:true
    },
    helpCenter: {
    suppress:true
    },
    contactForm: {
     
    ticketForms: [
    {
    id:14689
    ,fields: [
    { id: 123, prefill: { '*': 'test'} },
    { id: 321,prefill: {'*': 'f'}},
    { id: 146,prefill: {'*': 'g'}},
    { id: 145,prefill: {'*': 'h'}}
    ]
    }
    ]
    }
    }
    };
    0
  • John E. Parra J.
    Comment actions Permalink

    Any doesn't work only zE.identify but only fill name and email

    0
  • Romona
    Comment actions Permalink

    Hi John, 

    At first glance, it looks like there are three things that is causing the prefill not to work: 

    1. Fields array is an object of ticketForms. The way you have it displayed there are separate objects. I would recommend checking out the following documentation to help you format correctly:

    https://developer.zendesk.com/embeddables/docs/widget/zesettings#ticketforms

     

    2. Note: The API doesn't support pre-populating drop-down fields. However, you can set default values for custom drop-down fields in the Support admin interface (Manage > Ticket Fields). Did you set a default value for the custom field as recommended in the documentation below under fields:

    https://developer.zendesk.com/embeddables/docs/widget/zesettings#ticketforms

    If not, I would recommend that you do so.

    3. Ensure you have the correct field ID for each field. You may do so by navigating to Admin>Manage>Ticket Fields or by using the end-point /api/v2/ticket_fields.json to locate the field ID.

    Checking all these should fix the issue, however, if you are still having trouble, I would recommend that you send us an email at Support@zendesk.com

    0
  • Gary Johnson
    Comment actions Permalink

    Hi ... we're looking at including a knowledge-base search bot style experience on a new application. As much as possible we want to avoid users leaving a message requiring us to get back to them but don't want to make it impossible to do so. 

    With Zendesk is it possible to make the "Or you can get in touch ... Leave a message" only after the user has spent a bit of time searching the knowledge base first?

    Thanks

    Gary

    0
  • Molly
    Comment actions Permalink

    Hey Gary!

    Yes, absolutely. If you turn on the Help Center toggle, that forces users to search your Help Center prior to being able to submitting a ticket. This article actually walks you through the customer experience: Using Web Widget to embed customer service in your website

    0
  • Mary Paez
    Comment actions Permalink

    We are thinking of implementing web widget.  However, our portal is open to anyone.  We would like to do the following:

    if a customer goes to type into the web widget, that it asks the user to login with their portal account.  This way if the user creates a ticket, that they are not just any user.  They must be a registered customer to do this.

    Is there a way to do this? And how?

    0
  • Ruel Antonio Calvelo
    Comment actions Permalink

    Hi Mary, 

    Using the Widget API and Help Center Helpersyou can display the widget exclusively for users logged into the Help Center. For the complete instructions, kindly refer to this link. 

    0
  • Krzysztof Klimek
    Comment actions Permalink

    Hello

    We want to change the icon “cloud” on the Zendesk Widget, below

    I was looking for an articles in Zendesk but cant find anything related.

    The one we are proposing looks like below

     

    Is there a way to of doing it?

    thank you
    Krzysztof

    0
  • Dan Ross
    Comment actions Permalink

    Hey Krzysztof,

    You should be able to do that with the web widget API, specifically the badge.image setting.

    Here's a link to the documentation that would describe how to make these changes.

     

    Hope that helps!

    0
  • Krzysztof Klimek
    Comment actions Permalink

    Hi Ross

    We’ve reviewed the article provided, but failed to find the solution for this particular icon. What are we missing?

    Can you show us the exact class/code in the doc for this particular icon?

    Best
    Krzysztof


    0
  • Dan Ross
    Comment actions Permalink

    Hi Krzysztof,

    I'm not sure what you're missing. Are you having errors in your console? Do you have a sample of code you can share with the community? The more information you can provide about what you've tried increases the chances that someone in the Community can help you. 

    You'll want to invoke something like this in your page right after you load the widget, with the url to the image attribute pointing to a URL with your desired icon file. 

    <script type="text/javascript">
    window.zESettings = {
      webWidget: {
        launcher: {
          badge: {
            image: 'https://example.com/img/avatar.jpg'
          }
        }
      }
    };
    </script>
    0
  • Carlo Soresina
    Comment actions Permalink

    Hi Dan,

     

    A couple of questions:

     

    1. We would like to change the text "Leave us a message" on the widget to something different as well as customize the text "How can we help you?" - how can I do that, I don't see it in the standard customization section.

    2. Is there a way to make the "Email address" field optional?

    Thanks!

     

    Carlo

     

    0
  • Dan Ross
    Comment actions Permalink

    Hi Carlo,

    I think you're looking for this setting in the API to change the text.

    As for the emails, I don't think it can be made optional, since email is the core method Zendesk communicates to users with. 

    0
  • 涛 孟
    Comment actions Permalink

    Hi Dan,

    I want to hide this button. Can you help me?

    0
  • Krzysztof Klimek
    Comment actions Permalink

    Hi Dan Ross

     

    Sorry for not coming back. Is all sorted on our side. Thanks for all your help.

    Best
    KRis

    0
  • Carlo Soresina
    Comment actions Permalink

    Hi Dan,

    We tried accessing the link you sent us https://developer.zendesk.com/embeddables/docs/widget/settings#chatlabel to change some of the labels of the widget. We followed the instructions, but we are unable to change the text;

    We would like to change the text "Leave us a message" on the widget to something different as well as customize the text "How can we help you?" 

    This is the config we are using:

    <script type="text/javascript">
    window.zESettings = {
    webWidget: {
    launcher: {
    chatLabel: {
    '*': 'Leave us your feedback'
    },
    label: {
    '*': 'Leave us your feedback'
    }
    }
    }
    };
    </script>

    Let me know if anything is wrong here.

    Thanks,

     

    Carlo

     

    0
  • Carlo Soresina
    Comment actions Permalink

    Hi Dan,

    So some additional info.

    So with the changes we did we were able to change the label of the widget when minimized, see below:

     

    The problem is on the expanded widget, on the contact form we still see "Leave us a message" and we would also want to change the label "How can we help you?"

     

     

    Thanks!

    0
  • Dan Ross
    Comment actions Permalink

    @Carlo,

    I don't have my testing environment for this setup anymore, but I think this is where you need to adjust that label.

    @涛 孟

    Sorry, I am not sure which screen that is, is that on the ticket contact form, or on the screen for the start of a chat? It looks like the prechat form to me, but I don't see that on my side, nor do I see an attribute that looks like it would adjust this. What options are in the menu when you select it? 

    0
  • 涛 孟
    Comment actions Permalink

    Hi Dan,

    My partner has solved this problem.

    This is a mobile screen. At first, the button in the upper left corner did not respond. I wanted to hide it. Now my partner has solved this problem. Thank you for your response

    0
  • Alejandro Heredia
    Comment actions Permalink

    I want to update the custom fields of the contact form via:

    zE('webWidget', 'updateSettings', {
    webWidget: {
    contactForm: {
    fields: [
    { id: 360006028592, prefill: { '*': 'Some value' } },
    { id: 360018777631, prefill: { '*': 'Some other value' } },
    ]
    }
    }
    });

    But this only works if I set the window.zESettings = {...} before loading the widget. I need to be able to update those custom fields during runtime.
    2
  • Stuart Hallows
    Comment actions Permalink

     

    Is it possible to configure the target of the highlighted link? I'd like it to navigate to "our" Zendesk page, rather than the Zendesk Embeddables page.

    0

Please sign in to leave a comment.

Powered by Zendesk