The Contacts Widget allows your visitor to see all the options for contacting customer support with just one click on any help center page. Each link can be changed, or a new one can be added.
For our clients, we provide a free installation service of our extensions. You can also install an extension by yourself if you like. It is very simple. Use the following instructions.
-
Unpack the downloaded
zip
file. files:contacts-widget-min.css
contacts-widget-min.js
call.svg
chat.svg
new-ticket.svg
web-site.svg
Readme.txt
-
In Guide, click on the Customize design icon in the sidebar. The Theming center page opens.
-
Click the theme you want to edit to open it.
-
Click the Edit code button.
-
In the Assets section, click Add asset, then browse to select your files.
Select all
*.js
,*.css
, and*.svg
files from the unpacked zip. The files are added to your list of asset files. -
In your theme code configuration page under the templates directory, click the
document_head.hbs
file. - In the
document_head.hbs
file, paste the following snippet:<link rel="stylesheet" href="{{asset 'contacts-widget-min.css'}}" />
-
In your theme code configuration page under the templates directory, click the
footer.hbs
file. - In the
footer.hbs
file, paste the following snippet:<script src="{{asset 'contacts-widget-min.js'}}"></script> <script> contactsWidget({ title: "How can we help?", description: "Select a channel and let's talk.", brandColor: "#666", menuItems: [ { name: "chat", active: true, title: "Chat", icon: "{{ asset 'chat.svg'}}" }, { name: "new-ticket", active: true, title: "Submit a Ticket", icon: "{{ asset 'new-ticket.svg'}}", link: "{{ page_path 'new_request'}}", newWindow: false }, { name: "call", active: true, title: "Call Us", icon: "{{ asset 'call.svg'}}", link: "tel:123456789", newWindow: false }, { name: "web-site", active: true, title: "Website", icon: "{{ asset 'web-site.svg'}}", link: "https://www.lotusthemes.com/", newWindow: true }, ], }); </script>
-
Click Publish. The table of contents navigation is displayed in articles.
How to add the Zendesk Classic widget
By default, Zendesk enables Zendesk chat widget messaging, but you can switch to the Zendesk Classic widget.
- Go to the Admin Center.
- Go to Channels -> Messaging. Click on the Manage settings.
- Go to Channels -> Messaging and social -> Messaging. Disable messaging for your account.
- Step 4. Go to Channels -> Classic -> Web Widget. Click on the Setup tab and turn on the Add to Help Center option.
Widget Parameters
Name | Type | Default | Description |
---|---|---|---|
title |
String |
How can we help? |
A text that displays in the header of the widget. |
description |
String |
Select a channel and let's talk. |
A text that displays below the title. |
brandColor |
String |
#000 |
The color of the toggle button and the header's background. HEX color format. |
menuItems |
Array<Object> |
An array of objects representing menu items. See the available parameters below. |
Menu Items Parameters
Name | Type | Default | Description |
---|---|---|---|
name |
String |
null |
Unique name of the menu item |
active |
String |
null |
Enables and disables the menu item. |
icon |
String |
null |
URL of an icon. It's recommended to use the asset Zendesk helper |
link |
String |
null |
URL of the menu item. |
title |
String |
null |
A text of the corresponding menu item. |