Contacts widget

1. 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

2. In Guide, click on the Customize design icon in the sidebar. The Theming center page opens.

3. Click the theme you want to edit to open it.

4. Click the Edit code button.

5. 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.

6. In your theme code configuration page under the templates directory, click the document_head.hbs file.

7. In the document_head.hbs file, paste the following snippet:

   <link rel="stylesheet" href="{{asset 'contacts-widget-min.css'}}" />

8. In your theme code configuration page under the templates directory, click the footer.hbs file.

9. 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>
           

10. 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.

1. Go to the Admin Center.
2. Go to Channels -> Messaging. Click on the Manage settings.
3. Go to Channels -> Messaging and social -> Messaging. Disable messaging for your account.
4. Step 4. Go to Channels -> Classic -> Web Widget. Click on the Setup tab and turn on the Add to Help Center option.