Get Your Widget Code
First, grab your unique chat widget embed code:
Log in to your Hello Gubby dashboard at app.hellogubby.ai
Navigate to Widgets in the sidebar
Select Chat Widget
Click Get Embed Code
Copy the code snippet
Your embed code looks something like this:
Installation by Platform
Installing the chat widget follows the same process as the voice widget. Paste the code before the closing </body> tag on your website.
WordPress
Use a plugin like Insert Headers and Footers, or edit your theme's footer.php file directly. Paste the widget code in the footer section.
Squarespace
Go to Settings, then Advanced, then Code Injection. Paste the code in the Footer field and save.
Wix
In the Wix Editor, add an Embed HTML element, paste the widget code, and publish. Add it to a global element if you want it on every page.
Shopify
Go to Online Store, then Themes, then Edit code. Open theme.liquid and paste the code before </body>.
Webflow
In Project Settings, go to Custom Code and paste the widget code in the Footer Code section. Publish your site.
Framer
Open Site Settings, navigate to General, and add the code to the End of <body> tag field. Publish your site.
Custom HTML
Open your HTML file, find the closing </body> tag, and paste the widget code directly above it. Save and upload.
Customize Your Chat Widget
In your Hello Gubby dashboard, you can adjust how the chat widget looks and behaves:
Appearance Settings
Primary color: Match your brand for the chat button and header
Position: Bottom right or bottom left
Button icon: Chat bubble or custom icon
Chat window size: Standard or expanded
Agent avatar: Custom image or default
Greeting and Messages
Welcome message: What visitors see when they open the chat ("Hi! How can I help you today?")
Placeholder text: Hint text in the input field ("Type your question...")
Auto greeting: Proactively open the chat after visitors have been on the page
Greeting delay: How long to wait before showing the auto greeting
Lead Capture
Pre-chat form: Collect name, email, or phone before starting the conversation
Optional vs required: Choose which fields visitors must fill out
When to show: Always, after a few messages, or only when booking
Tip: Start with minimal friction. You can always add a pre-chat form later, but starting without one often leads to more conversations. Hello Gubby can ask for contact information naturally during the chat when needed.
What the Chat Widget Can Do
The chat widget is powered by the same AI that handles your phone calls, which means it can:
Answer questions from your FAQ and knowledge base
Book appointments directly into your connected calendar
Qualify leads by asking the right questions
Capture contact information and sync to your CRM
Hand off to a human when configured to do so
Support multiple languages for diverse visitors
Everything the visitor says is logged in your dashboard, so you have a complete record of every chat conversation.
Test Your Chat Widget
After installing:
Open your website in a new browser tab or incognito window
Look for the chat button in the corner of the screen
Click to open the chat window
Type a test question
Verify you receive a response from your AI agent
Check your Hello Gubby dashboard to see the conversation
Using Voice and Chat Together
You can have both the voice widget and chat widget on your website. Hello Gubby offers a few options for how they appear:
Combined launcher: One button that lets visitors choose voice or chat
Separate buttons: Voice widget in one corner, chat in another
Page based: Voice on some pages, chat on others
Configure this in your widget settings. For most businesses, the combined launcher provides the cleanest experience.
Troubleshooting
Chat widget does not appear
Clear your browser cache and refresh
Confirm the embed code is placed correctly before
</body>Check for JavaScript errors in your browser console
Ensure your website platform saved or published your changes
Widget appears but no response
Verify your Hello Gubby account is active
Confirm the widget ID matches your dashboard
Test your AI agent using the test call feature in the dashboard
Pre-chat form not showing
Check that lead capture is enabled in your widget settings
Confirm which trigger you selected (always, after messages, or on booking)
Analytics and Insights
Your Hello Gubby dashboard tracks chat widget performance:
Chat volume: How many conversations started
Engagement rate: Percentage of visitors who chat
Common questions: What visitors are asking about
Conversion rate: How many chats lead to appointments or leads
Use these insights to improve your FAQs and optimize your chat experience.
Next Steps
With your chat widget live, visitors have another way to engage with your business. Consider:
Adding the voice widget for visitors who prefer speaking
Setting up the video bubble for a personal greeting
Expanding your FAQ knowledge base based on common chat questions
Connecting your calendar so chats can end in booked appointments
