Installing the Chat Widget

The ChattyPie widget lets your website visitors start conversations with your team in real time. This guide covers installation for static sites, single-page apps, and pre-chat form configuration.

Quick Install (HTML)

1. Go to Settings > Installation in your dashboard
2. Copy the embed snippet
3. Paste it before the closing </body> tag on your website:

<script
  src="https://your-domain.com/widget.min.js"
  data-website-uid="YOUR_WORKSPACE_UID"
  async>
</script>

The widget loads asynchronously and appears as a chat bubble in the bottom-right corner of your site.

Single-Page App (SPA) Support

If your site uses React, Vue, Next.js, or another SPA framework, the widget automatically detects client-side navigation by monitoring the History API. No additional configuration is needed.

For manual control, you can use the JavaScript API:

// Notify the widget of a page change
window.ChattyPie?.pageChanged({ url: window.location.href });

// Open the widget programmatically
window.ChattyPie?.open();

// Close the widget
window.ChattyPie?.close();

Pre-Chat Form

Collect information before the conversation starts:

1. Go to Settings > Widget > Pre-Chat Form
2. Enable the form and configure fields:
   • Name (required/optional)
   • Email (required/optional)
   • Custom fields (e.g. "Order number", "Company name")
3. Click Save

When enabled, visitors fill out the form before their first message. The data appears in the conversation sidebar.

Widget Appearance

Customize the look and feel in Settings > Widget > Appearance:

• Brand color — The primary color used for the widget button and header
• Position — Bottom-right or bottom-left
• Welcome message — The greeting shown when a visitor opens the widget
• Team avatar — Show individual agent avatars or a workspace logo
• Offline message — Message shown outside business hours

Verifying Installation

After adding the snippet, visit your website and look for the chat bubble. Click it to open the widget and send a test message. It should appear in your ChattyPie inbox within seconds.

If the widget doesn't appear:

• Check the browser console for JavaScript errors
• Verify the data-website-uid matches your workspace UID
• Ensure the script URL is correct and accessible
• Check if an ad blocker or Content Security Policy is blocking the script