Get started  

Help Center

Community / Forum Ask Zappter Support We build your app Marketplace





Mastering the content editor Pixel perfect design Setup your E-Commerce Store Configure your booking engine Event-System / Drop-In


App Store Submission Creating Push Notifications Typography Changing template Changing Rules

Business Modules


More Tutorials


Integrating HubSpot Chat

Integrating HubSpot chat

Follow these simple steps to set up your integration. It's involves two phases: 

  1. Get your HubSpot Tracking Code.
  2. Create a 'ChatFlow' in HubSpot.
  3. Enter HubSpot Tracking Code in Zappter show chat widget.
Getting your HubSpot  Tracking Code:
HubSpot Tracking Code is the one that links your app with HubSpot chat dashboard and puts a chat widget on your app.
1. Log in to your HubSpot account, click on the 'settings' (gear icon) on the top navigation bar.
2. The left sidebar menu opens; navigate to the 'Tracking Code' option.
3. Note down the Tracking Code. Copy the entire widget code to your notepad and only extract the highlighted part as in the picture.
image.png 66.53 KB
Note: The UI and the steps in the external source are subject to change by the third party without prior notice.
Creating a Chatflow in HubSpot:
Chatflows are streams of different chats under your HubSpot. For instance, you can have many businesses and websites each one assigned with a Chatflow, and one of them is assigned to your app. You can customize chat behavior and the user interface of the chat widget that's going to appear on your app. For detailed information on this HubSpot feature, you can visit this link.
1. Log in to your HubSpot account, then Conversations > Chatflows.
image.png 57.91 KB
2. Click on 'Create chatflow.'
image.png 52.56 KB
3. Select 'Website.'
image.png 39.62 KB
4. Select 'Live chat' and click on 'Next.'
5. Accept the default values for rest of the options and click on 'Create' to complete the 'Chatflow.'
6. Click on the 'Back to chatflows' at the top left corner. Note: Here is a document from HubSpot on customization details about these topics.
image.png 69.43 KB
7. Finally, tick to enable the chatflow.
image.png 44.68 KB
Entering HubSpot Tracking Code in Zappter:
Paste or enter the HubSpot Tracking Code in Zappter as mentioned in the above section. For example, enter only this part of your HubSpot Tracking Code:
1. Admin > Settings > Hubspot Chat. 
image.png 232.54 KB
2. Enter the HubSpot Tracking Code and save the changes to complete your integration.
Hubspot Chat