Get Your Widget Code
Before adding the widget to your site, you need to copy your unique embed code:
Log in to your Hello Gubby dashboard at app.hellogubby.ai
Navigate to Widgets in the sidebar
Select Voice Widget
Click Get Embed Code
Copy the code snippet
Your embed code looks something like this:
The widget ID is unique to your account and links to your specific AI agent configuration.
Platform Specific Instructions
WordPress
Option 1: Using a plugin (easiest)
Install and activate the Insert Headers and Footers plugin (or similar code injection plugin)
Go to Settings, then Insert Headers and Footers
Paste your Hello Gubby widget code in the Footer section
Click Save
Option 2: Theme files
Go to Appearance, then Theme File Editor
Open your theme's
footer.phpfilePaste the widget code just before the closing
</body>tagClick Update File
Tip: If you use a page builder like Elementor or Divi, look for an HTML or Code widget to add the script to your footer template.
Squarespace
Go to Settings in your Squarespace dashboard
Click Advanced, then Code Injection
Paste your Hello Gubby widget code in the Footer field
Click Save
The widget will now appear on all pages of your Squarespace site.
Wix
Open your Wix Editor
Click the + button in the left toolbar
Select Embed Code, then Embed HTML
Paste your Hello Gubby widget code
Position the element anywhere on the page (the widget floats, so position does not matter)
Click Publish
To show the widget on all pages, add it to your site header or footer using Wix's global elements.
Shopify
From your Shopify admin, go to Online Store, then Themes
Click Actions (or the three dots), then Edit code
In the Layout folder, open
theme.liquidFind the closing
</body>tag (usually near the bottom)Paste your Hello Gubby widget code just before
</body>Click Save
Webflow
Open your Webflow project
Go to Project Settings
Select the Custom Code tab
Paste your Hello Gubby widget code in the Footer Code section
Click Save Changes
Publish your site for changes to take effect
Framer
Open your Framer project
Click the gear icon to open Site Settings
Navigate to the General tab
Scroll to Custom Code
Paste your Hello Gubby widget code in the End of <body> tag field
Publish your site
Custom HTML Website
If you manage your own HTML files:
Open your main HTML file or template
Find the closing
</body>tagPaste the Hello Gubby widget code just before
</body>Save and upload the file to your server
For multi-page sites, add the code to your shared footer template or include file so it appears on every page.
Customize Your Widget
Back in your Hello Gubby dashboard, you can customize how the voice widget appears and behaves:
Appearance
Button color: Match your brand colors
Position: Bottom right or bottom left of the screen
Button icon: Microphone, phone, or chat bubble
Size: Standard or compact for mobile
Behavior
Auto greeting: Widget can greet visitors automatically after a delay
Welcome message: Customize what visitors see before they start speaking
Mobile behavior: Optimize for tap to talk on mobile devices
Changes you make in the dashboard update automatically on your website. No need to update the embed code.
Test Your Widget
After installing the widget:
Visit your website in a new browser tab (or incognito window)
Look for the widget button in the corner of your screen
Click the button and allow microphone access when prompted
Speak a test question to confirm the AI agent responds
Check your Hello Gubby dashboard to see the conversation logged
Success check: If you see the widget, can speak, and receive responses from your AI agent, your installation is complete.
Troubleshooting
Widget does not appear
Clear your browser cache and refresh the page
Check that the embed code is placed correctly before the closing
</body>tagConfirm there are no JavaScript errors in your browser console (right click, Inspect, Console tab)
Make sure you published or saved changes on your website platform
Microphone is not working
Ensure your browser has permission to access the microphone
Check that you are on HTTPS (voice features require a secure connection)
Try a different browser to rule out browser specific issues
Widget appears but AI does not respond
Verify your Hello Gubby account is active and not past any usage limits
Check that the widget ID in your embed code matches your dashboard
Try the test call feature in your dashboard to confirm your agent is working
Widget on Specific Pages Only
If you want the widget to appear only on certain pages (like your Contact or Services page), you have two options:
Platform tools: Many website builders let you add code to individual pages instead of site-wide
Page targeting: In your Hello Gubby dashboard, you can configure the widget to show only on specific URLs
Contact us if you need help with advanced page targeting rules.
Next Steps
With your voice widget installed, visitors can now speak directly with your AI agent from any device. Consider also:
Adding the chat widget for visitors who prefer typing
Setting up the video bubble for a more personal touch
Reviewing widget analytics in your dashboard to see engagement
