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 Website as the channel type.
3. Configure the widget settings:
   • Choose a descriptive name for the inbox (e.g., "Main Site Chat").
   • Set your brand color so the widget matches your website's look and feel.
   • Write a welcome message that greets visitors when they open the chat.
   • Pick the widget position , bottom-left or bottom-right.
4. Click Create to save the inbox.

Installing the widget

After creating the inbox, Deskwoot generates a JavaScript snippet. 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.

Pre-chat forms

You can require visitors to enter their name and email before starting a chat. Enable the pre-chat form in your inbox settings. This helps you identify returning customers and follow up via email if they leave before you respond. Collecting contact details upfront also reduces the number of anonymous conversations your team needs to handle.

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.
• Enable pre-chat forms if your team cannot respond in real time; this ensures 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

Can I add the widget to specific pages only?

Yes. Simply include the JavaScript snippet on the pages where you want the widget to appear and omit it from the rest. If you use a tag manager, configure a trigger that fires only on the desired URLs.

Will the widget slow down my website?

The widget is designed to load asynchronously, so it should have minimal impact on your page speed. Placing the snippet before the closing </body> tag is recommended for optimal performance.

Can I use the widget on Shopify or WooCommerce?

Absolutely. Paste the snippet into your theme's layout file. For Shopify, use the theme.liquid file; for WooCommerce, use your theme's footer.php or a header/footer script plugin.

Frequently asked questions