Web Widget

The web widget adds a chat bubble to your website, allowing visitors to start conversations with your AI agent instantly.

Prerequisites

Before setting up the web widget:

• ✅ Chatwoot is connected (see Chatwoot Setup)
• ✅ Access to your website's HTML or CMS
• ✅ List of domains where the widget will appear

Setting Up the Widget

Step 1: Navigate to Channel Settings

1. Go to Integrations → Chatwoot tab
2. Find the Web Widget channel card
3. Click Configure or Connect

Step 2: Enter Widget Details

Field	Description	Example
Website Name	Name for this widget	"Main Website"
Authorized Domains	Domains where widget works	example.com, www.example.com
Brand Name	Displayed in widget header	"Acme Realty"
Welcome Message	First message shown to visitors	"Hello! How can I help you today?"

Authorized Domains

The widget only works on domains you authorize. Include all variations:

• example.com
• www.example.com
• staging.example.com (if testing)

Step 3: Customize Appearance (Optional)

Option	Description
Widget Color	Primary color for the bubble and header
Position	Bottom-right or bottom-left
Launcher Icon	Custom icon or default chat bubble

Step 4: Save and Get Code

1. Click Save to create the widget
2. The code snippet appears automatically
3. Copy the snippet for installation

Installing the Widget

Option 1: Direct HTML

Add the snippet before the closing </body> tag:

<script>
  (function(d,t) {
    var BASE_URL="https://chat.proppilot.ai";
    var g=d.createElement(t),s=d.getElementsByTagName(t)[0];
    g.src=BASE_URL+"/packs/js/sdk.js";
    g.defer = true;
    g.async = true;
    s.parentNode.insertBefore(g,s);
    g.onload=function(){
      window.chatwootSDK.run({
        websiteToken: 'YOUR_TOKEN_HERE',
        baseUrl: BASE_URL
      })
    }
  })(document,"script");
</script>

Option 2: Google Tag Manager

1. Create a new Custom HTML tag
2. Paste the widget code
3. Set trigger to All Pages
4. Publish the container

Option 3: WordPress

1. Install a plugin like "Insert Headers and Footers"
2. Paste the code in the footer section
3. Save changes

Option 4: Other Platforms

Platform	Method
Webflow	Project Settings → Custom Code → Footer
Squarespace	Settings → Advanced → Code Injection → Footer
Wix	Settings → Custom Code → Body - end
Shopify	Online Store → Themes → Edit Code → theme.liquid

Testing the Widget

After installation:

1. Visit your website in a browser
2. Look for the chat bubble (usually bottom-right)
3. Click to open the chat window
4. Send a test message
5. Verify the response appears in PropPilot inbox

Incognito Testing

Test in an incognito/private window to see the widget as a new visitor would.

Enabling Your Agent

To have your AI agent respond via the widget:

1. Go to Agents → Select your agent
2. Navigate to Channels tab
3. Enable the bot on Web Widget channel

Customization Options

Welcome Messages

Set up automated greetings:

• Welcome Message: Shown when chat opens
• Away Message: Shown outside business hours (if configured)

Pre-Chat Form

Collect visitor information before chat:

• Name
• Email
• Phone number
• Custom fields

Configure in Chatwoot settings if needed.

Troubleshooting

Widget Not Appearing

1. Check domain authorization - Is your domain in the authorized list?
2. Check code placement - Is the snippet before </body>?
3. Check console errors - Open browser DevTools (F12) and look for errors
4. Clear cache - Try hard refresh (Ctrl+Shift+R)

Widget Appears But Doesn't Work

1. Verify Chatwoot connection status
2. Check webhook configuration
3. Review channel status in PropPilot

Styling Conflicts

If the widget looks wrong:

1. Check for CSS conflicts with your site
2. The widget uses an iframe, so most conflicts are rare
3. Contact support for custom styling needs

Best Practices

Do's

• ✅ Test on all authorized domains
• ✅ Include mobile-responsive testing
• ✅ Set appropriate welcome messages
• ✅ Monitor conversations regularly
• ✅ Update authorized domains when adding new sites

Don'ts

• ❌ Install on unauthorized domains (it won't work)
• ❌ Use generic welcome messages
• ❌ Ignore the widget on mobile devices
• ❌ Forget to enable the AI agent

What's Next?

Set up additional channels:

• WhatsApp - Connect WhatsApp Business
• Telegram - Set up Telegram bot