Web Widget resources

Edited April 30, 2020 05:36

all plans

Fastpath: Channels > Widget

This article includes resources for customers with Zendesk Support that are setting up and using the Web Widget, including documentation and support tips.

Getting started

Providing omnichannel support using Web Widget for the Support Suite

Setting up and configuring the Web Widget

If you have Zendesk Chat, but don't have Zendesk Support, see Integrated Chat in the Web Widget resources for information about setting up your Chat widget.

Developer documents

Community discussions and support tips

Have more questions? Submit a request

6 Comments

David Lance
- July 26, 2019 15:43
- Edited
Comment actions Permalink
I am a contract technical writer. There is a functional and mostly complete - though seldom consulted - ProProfs knowledge base for our application. The development / operations / product teams have wisely requested a Zendesk Guide for customer self-service knowledge retrieval. They are attracted to Web Widget. They like the idea of a floating "Get help" launcher button at the lower right corner. They want the content displayed by this button to be context aware. They want it to display a list of suggested "How do I" articles when launched (that are relevant to where the user is in the app when they click it.) So I understand I need to install Web Widget. (Done.) Do some basic configuration using the toggle switches. (Done.) Then I need to dig into the API and figure out how to set up the settings of the window.zESettings object. These will live inside a <script> element. I will create a unique <script> element for each page in the app. Engineering will then embed these unique <script> elements in the <head> element of each page in the app.

Am I close? Do I have this right? What is the logical workflow from here?

* https://developer.zendesk.com/embeddables/docs/widget/settings

0
David Lance
- July 26, 2019 14:52
Comment actions Permalink
0
David Lance
- July 26, 2019 16:20
Comment actions Permalink
I think I may find my answers here: https://support.zendesk.com/hc/en-us/articles/219796887

0
Jupete Manitas
- July 31, 2019 02:33
Comment actions Permalink
Thanks for writing, David!

Glad to know that you were able to find answers there! Please let us know if you have any other questions.. Thanks!

0
Olexandra Vasilyeva
- October 02, 2019 12:55
Comment actions Permalink
Hello!

Could you please lead me to where I can find the information on where and how the content from the custom fields will appear in the ticket in Zendesk interface?

Also, can I convert the content of the particular custom field into a ticket label?

And the most important question is if the email field could be auto-replaced with the login of the user in our system?

Thank you in advance!

0
Thomas Verschoren
- October 07, 2019 18:07
Comment actions Permalink
Hey,

Custom ticket fields appear in the left sidebar next to an open ticket.

See below for agent view of a custom field next to a ticket, the custom field as configured in the admin settings, and how that same ticket appears for an end-user in e.g. the widget.

For text-fields the value is just text, but for dropdowns and checkboxes the chosen values result in tags on a ticket which can be used for custom views, Explore reports,...

See also https://support.zendesk.com/hc/en-us/articles/217073927-Understanding-tags-and-ticket-fields

As for pre-filling the username and mail:

If you use the Help Center you can add this code to autofill logged in users. Just add-in in the footer of the Help Center template:
```
<script>
zE(function() {
 zE.identify({
   name: HelpCenter.user.name, 
   email: HelpCenter.user.email 
 });
}); 
</script>
```
If you want to prefill in the user name and email on your own website, you can use the same code but ask your web developer to enter name and email values in the code below. You should copy paste this code immediately under the default widget code on your website
```
<script>

var user_name = enternamehere;
var user_email = enteremailhere;

zE(function() {
 zE.identify({
  name: user_name, 
  email: user_email;
}); 
</script>
```
0