Chat Widget Overview
Let your customers message you directly from your website, and have those chats appear in your Housecall Pro Inbox.
Key benefits:
Capture leads directly from your website
Keep conversations in your Inbox
Give customers an easy way to reach you
Before You Start
Most website builders (like Wix, Squarespace, Webflow, and WordPress) only allow custom code on paid plans.
If you’re on a free or basic plan with your website builder, the Chat Widget may not appear or work correctly. Check your website plan to confirm it supports adding “custom code,” “code injection,” or “HTML snippets” before starting.
How to Add the Chat Widget
Step 1: Get Your Widget Code
Click the My Apps icon (3x3 square) in the top right corner of your Housecall Pro account.
Go to the App Store, search “Chat on your website”, then open Chat on your website.
Choose the color you’d like your chat bubble to be and copy the JavaScript snippet.
📌 Note: Do not share this snippet - it’s unique to your company.
Step 2: Add the Code to Your Website
Paste your code just before the closing </body> tag on your website. This ensures the widget loads properly without interrupting other elements on your page.
Here’s how to do it, depending on your website platform:
Platform | Plan Required | Where to paste code | Offical Docs |
Wix | Paid plan required | Settings > Advanced > Custom Code | |
Squarespace | Paid plan required | Settings > Website > Code Injection > Footer | |
Webflow | Paid plan required | Project Settings > Custom Code > Footer Code | |
Duda | Paid plan required | Settings > Head HTML > Body End HTML | |
WordPress.com | Paid plan required | Use a plugin or code injection in the footer | |
WordPress.org(self-hosted) | Free | Use a plugin such as WPCode to insert the script in the footer | |
Custom Site | Developer access required | Paste before closing </body> tag | Ensure your site allows scripts from chat.housecallpro.com |
Step 3: Test the Widget
After publishing your changes:
Open your website in an incognito/private browser window.
Wait a few seconds for the widget to appear in the bottom-right corner.
If it doesn’t show up, continue with the troubleshooting steps below.
Step 4: Turn on Job Inbox and Notifications
Once the widget is on your site, enable Job Inbox so new conversations from your website show in your Inbox and you get notified.
Click the My Apps icon (the 3x3 square) in the top right corner of your Housecall Pro account.
Select the Job inbox app to access your Job inbox settings.
Toggle Job inbox on if it’s not already toggled on. Once activated, the toggle will turn blue, and the word "ACTIVE" will appear.
How to access your Chat Widget Messages
Once the integration is set up, all new messages from your Website Chat Widget will now be accessible in the “Chats from your Website” channel within Job Inbox. When a new chat appears, just tap “chat customer” to continue the conversation.
Troubleshooting the Chat Widget
If your chat widget doesn’t appear or isn’t working properly, follow these steps in order:
Step 1: Check Your Website Plan
Confirm your plan supports adding custom code.
If you’re on a free or basic plan, the chat widget will not load - even if the code is added.
Step 2: Confirm Business Hours
The chat widget behaves differently depending on your Business Hours:
During business hours → live chat form
Outside business hours → contact form
If you’re testing after hours, you may only see the contact form.
Step 3: Clear Your Cache
Clear both your website cache (from your builder or plugin) and your browser cache.
Then, open your site in an incognito or private window and refresh the page.
Step 4: Verify the Widget Code Loaded
Check whether the script was added correctly:
Right-click on your site → Inspect.
Press Ctrl+F (Windows) or Cmd+F (Mac).
Search for proChatIframeContainer
If you find it, the widget script is installed correctly. If not, recheck your code placement and make sure your changes were published.
Step 5: Look for Hidden or Overlapping Elements
If the widget loads but isn’t visible, something else on your site might be covering it (for example, a cookie banner or “Back to Top” button).
You can ask your website builder or developer to adjust z-index values to fix this.
Developers can use CSS like this: #proChatIframeContainer { z-index: 1300; }
Step 6: Check for Script Blocking
If you or your developer sees CSP (Content Security Policy) or blocking errors in the browser console, make sure your site allows scripts from the following: https://chat.housecallpro.com
Chat Widget FAQs
Where do customer messages go?
Messages appear in your Housecall Pro Inbox → Customers channel.
Can customers send photos or videos?
Yes, customers can attach files (up to 5MB each) once they start chatting with you.
Why is the chat full screen on mobile?
That’s expected. On screens narrower than 600px, the chat expands to fullscreen for a better mobile experience.
Can I use this widget on any website?
Yes, as long as your website allows you to add a JavaScript snippet.
Need Help?
If your widget still doesn’t appear:
Take a screenshot showing where you added the code.
Include your Org ID, website URL, and the platform you’re using (e.g., Wix, Squarespace, WordPress).
Contact our Support Team via the blue chat bubble in your Housecall Pro account.
Our team can help verify your setup or escalate to our technical specialists if needed.
Having trouble finding what you need?
For further assistance, please reach out to our Chat Support team
via the Blue Chat Bubble in your Housecall Pro account, or
contact our Phone Support team at (858) 842-5746.