> ## Documentation Index
> Fetch the complete documentation index at: https://docs.softr.io/llms.txt
> Use this file to discover all available pages before exploring further.

# HubSpot Chat

> HubSpot Chat allows to add a chat widget on your site to connect with site visitors at any time.

## Creating a Chatflow

To add a chat widget to your Softr app, you first need to create a chatflow in your HubSpot account to be able to receive messages. To do that, go to **Conversations => Chatflows => Create chatflow.**

<Frame caption="Creating a Chatflow">
  <img src="https://mintcdn.com/softr-2b8a27e1/vSuEZ5Jcy7JAeP4I/integrations/images/hubspot-chat/image1.png?fit=max&auto=format&n=vSuEZ5Jcy7JAeP4I&q=85&s=e6390083a6a3556c8d522c4b77d48d84" alt="Creating a Chatflow" width="1404" height="441" data-path="integrations/images/hubspot-chat/image1.png" />
</Frame>

In the next step, choose **Website**.

<Frame caption="Choosing the “Website” option">
  <img src="https://mintcdn.com/softr-2b8a27e1/vSuEZ5Jcy7JAeP4I/integrations/images/hubspot-chat/image2.png?fit=max&auto=format&n=vSuEZ5Jcy7JAeP4I&q=85&s=fcafd59e657d847df8785d91197f30b2" alt="Choosing the “Website” option" width="874" height="411" data-path="integrations/images/hubspot-chat/image2.png" />
</Frame>

Then select **Live chat**.

<Frame caption="Selecting the “Live chat”option">
  <img src="https://mintcdn.com/softr-2b8a27e1/vSuEZ5Jcy7JAeP4I/integrations/images/hubspot-chat/image3.png?fit=max&auto=format&n=vSuEZ5Jcy7JAeP4I&q=85&s=342e41a7e3f5901199e30fe433f7ef81" alt="Selecting the “Live chat”option" width="1008" height="550" data-path="integrations/images/hubspot-chat/image3.png" />
</Frame>

Next, select the **Inbox** and a **Language** for the chatflow, and hit **Create**. You can find more info on configuring these and other parameters of the chatflow [here](https://knowledge.hubspot.com/chatflows/create-a-live-chat).

<Frame caption="Selecting Inbox and Language">
  <img src="https://mintcdn.com/softr-2b8a27e1/vSuEZ5Jcy7JAeP4I/integrations/images/hubspot-chat/image4.png?fit=max&auto=format&n=vSuEZ5Jcy7JAeP4I&q=85&s=90ef2aaf357d154ff4d188d161fa115b" alt="Selecting Inbox and Language" width="1365" height="641" data-path="integrations/images/hubspot-chat/image4.png" />
</Frame>

Lastly, you enter the edit page where you can [customize](https://knowledge.hubspot.com/chatflows/create-a-live-chat) your chatflow, and, as soon as you are done, enable it in the upper right corner of the page.

<Frame caption="Enabling chatflow">
  <img src="https://mintcdn.com/softr-2b8a27e1/vSuEZ5Jcy7JAeP4I/integrations/images/hubspot-chat/image5.png?fit=max&auto=format&n=vSuEZ5Jcy7JAeP4I&q=85&s=0fdcf23d625a40630f195a4eb5d670da" alt="Enabling chatflow" width="1405" height="302" data-path="integrations/images/hubspot-chat/image5.png" />
</Frame>

So, your chatflow is ready, and you can go ahead and add the tracking code in your Softr app to start displaying the chat widget to your visitors.

## Getting the Tracking Code

Go to **Settings** in your HubSpot account.

<Frame caption="Accessing settings">
  <img src="https://mintcdn.com/softr-2b8a27e1/vSuEZ5Jcy7JAeP4I/integrations/images/hubspot-chat/image6.png?fit=max&auto=format&n=vSuEZ5Jcy7JAeP4I&q=85&s=0835eb32e4b625401e70cc42da1c4f75" alt="Accessing settings" width="1405" height="218" data-path="integrations/images/hubspot-chat/image6.png" />
</Frame>

Scroll down to **Tracking Code** and copy the **Embed code**.
<Tip>The location of the tracking code can be different depending on your HubSpot subscription plan. Check out this [article](https://knowledge.hubspot.com/reports/install-the-hubspot-tracking-code) for more details.</Tip>

<Frame caption="Getting the tracking code">
  <img src="https://mintcdn.com/softr-2b8a27e1/vSuEZ5Jcy7JAeP4I/integrations/images/hubspot-chat/image7.png?fit=max&auto=format&n=vSuEZ5Jcy7JAeP4I&q=85&s=c8a67f84abb62ada33eabb357e5cb66d" alt="Getting the tracking code" width="1369" height="447" data-path="integrations/images/hubspot-chat/image7.png" />
</Frame>

## Adding the tracking code in Softr studio

In Softr Studio, go to **Settings => Integrations => HubSpot Chat**, and enter the **Tracking Code**.

<Frame caption="Adding the tracking code in Softr">
  <img src="https://mintcdn.com/softr-2b8a27e1/vSuEZ5Jcy7JAeP4I/integrations/images/hubspot-chat/image8.png?fit=max&auto=format&n=vSuEZ5Jcy7JAeP4I&q=85&s=600d085679a94e0509d2ef5d9b3b1441" alt="Adding the tracking code in Softr" width="930" height="1078" data-path="integrations/images/hubspot-chat/image8.png" />
</Frame>

Save the **Settings**, republish your app, and you're done. Now, the chat widget should start appearing on your site.

<Frame caption="HubSpot chat widget added">
  <img src="https://mintcdn.com/softr-2b8a27e1/vSuEZ5Jcy7JAeP4I/integrations/images/hubspot-chat/image9.png?fit=max&auto=format&n=vSuEZ5Jcy7JAeP4I&q=85&s=f8771df31445af2af7c0c106f4873455" alt="HubSpot chat widget added" width="1018" height="374" data-path="integrations/images/hubspot-chat/image9.png" />
</Frame>
