Integrate the Hubspot Chat Widget

While Contact Button doesn’t currently offer any native chat capabilities, you can easily create an Chat Widget App for your button that automatically opens your existing Hubspot chat widget without the need of a developer. 

Simply complete the following steps to enable the integration.

Step 1 – Create a new “Chat Widget” App
Click the “+ Create New App” button on your apps page or select “New App” from the “Add New” button in your side menu.

Step 2 – Select the “Chat Widget” App
Scroll down until you see the Chat Widget box and then click the “Create App” button.

Step 3 – Setup your new “Chat Widget” App
Give your new app a display name and add a description if you using a “Rows” layout in your menu.

Step 4 – Select “Hubspot” from the Chat Integration drop down menu

Step 5 – Open your Hubspot Dashboard
If you haven’t already, login to your Hubspot account at https://app.hubspot.com/

Step 6 – Go to Hubspot’s Chatflows Settings page
This page can typically be found by going to https://app.hubspot.com/chatflows
If this doesn’t work for you, click the Conversations menu text in the dashboard and then select “Chatflows”

Step 7 – Copy your “Widget ID” from browser URL
Once you reach your Chatflows page, Hubspot will add a series of 8 numbers to the end of the URL. Copy just the numbers you see between the two / / in the URL. (E.g. if you see https://app.hubspot.com/chatflows/12345678/?limit=15&source=chat, copy or write down the number “12345678”)

Step 8 – Paste or Write your “Widget ID” into Contact Button Dashboard
Go back to the new Chat Widget App page you were previously working on in your Contact Button Dashboard. Click the text box that says “Website ID” and then paste or write the number from the Hubspot URL into the text box.

Step 9 – Finish setting up your new Contact Button app
Complete the Icon Design & Display Options setup sections like you would for any other Contact Button app you create.

Step 10 – Save & Test App
Once you’re finished modifying your new app, click Save. If you’ve left the “Enable App” toggle on. You should immediately be able to see your new app in any of your buttons you added it to. 

Pro-tip! if you haven’t published your button on your website yet, you can always go to your Settings page and click the “Test Button” button on the Test & Install tab to see a live version of your button and new app on a blank page.