Adding a website live chat widget

The Deskwoot live chat widget lets your website visitors start conversations directly from your site. It loads quickly, works seamlessly on desktop and mobile, and can be customized to match your brand. Below you'll find step-by-step instructions for setting up the widget, tips for getting the most out of it, and answers to common questions.

Creating the widget inbox

1. Navigate to Settings > Inboxes > Add Inbox.
2. Select Live Chat as the channel, then Website Live Chat.
3. Click Create Inbox. Deskwoot creates the inbox and opens its settings.
4. On the Settings tab, configure the widget:
   • Give the inbox a descriptive name (e.g., "Main Site Chat"). Only your team sees it.
   • Set the Widget Color so the widget matches your website's look and feel.
   • Write a Welcome Heading and Welcome Tagline that greet visitors when they open the chat.
   • Pick the Widget Position, Bottom Left or Bottom Right.
5. Save each section you changed.

Installing the widget

After creating the inbox, the Widget Installation card on its Settings tab shows a JavaScript snippet with your widget token. To install it:

1. Copy the provided code snippet.
2. Paste it into the <head> section or just before the closing </body> tag of every page where you want the widget to appear.
3. If you use a tag manager like Google Tag Manager, add the snippet as a Custom HTML tag instead.

After deploying, open your site in an incognito window to confirm the widget loads correctly.

The visitor's email address

A new website live chat has no step before the chat: visitors write right away. When Fynn answers the chat, he answers first and then asks once in the chat for an email address, so your team can still reply by email after the visitor leaves. The name is optional. If you want the address before the first message, turn on Ask for email before the chat on the Settings tab of the inbox. To ask for a name, a phone number or your own fields first, set up the form on the Pre Chat Form tab (Startup plan and up). While it is on, it replaces the email step. Without an AI bot on the inbox, nobody asks in the chat, so visitors stay anonymous unless you turn on the email step. Live chats you created before keep their setting.

Widget customization

Customize the widget appearance from your inbox settings. You can change the color, position, welcome title, tagline, and greeting message. The widget automatically adapts to mobile screens, so there's no need for separate mobile configuration.

Best-practice tips

• Keep the welcome message short. One or two friendly sentences perform better than a long paragraph.
• Match your brand colors to maintain a consistent visitor experience across your site.
• Turn on Ask for email before the chat if no AI bot answers the chat and your team cannot reply right away, so you can follow up by email.
• Test on multiple devices after installation to verify the widget displays and functions properly on both desktop and mobile browsers.

Troubleshooting

• Widget not appearing: Make sure the JavaScript snippet is placed correctly and that no browser extensions or ad blockers are preventing it from loading. Clear your cache and try an incognito window.
• Styling conflicts: If your website's CSS interferes with the widget's appearance, check for global styles that might override iframe or button elements.
• Slow loading: Placing the snippet just before the closing </body> tag ensures the widget loads after your main content, minimizing any impact on page speed.

Frequently asked questions