Adding Hubspot Live Chat to Webflow is a great way to enhance your website’s interactivity and engage with your visitors in real-time. In this tutorial, we will walk you through the step-by-step process of integrating Hubspot Live Chat into your Webflow site.
To begin, make sure you have a Hubspot account and access to your Webflow site’s HTML. Now, let’s get started!
Step 1: Log in to your Hubspot account and navigate to the “Conversations” tab.
Step 2: In the left sidebar, click on “Chatflows” and then select “Create chatflow.”
Step 3: Give your chatflow a name, such as “Webflow Live Chat,” and choose the type of chatflow you want to create. For this tutorial, we will select “Live Chat.”
Step 4: Customize the appearance of your chat widget by selecting a color scheme that matches your website’s design. You can also add a welcome message or configure other settings according to your preferences.
Note: If you want to display the live chat widget on specific pages of your Webflow site only, you can use Hubspot’s Targeting options. This allows you to show or hide the widget based on criteria like URL patterns or visitor behavior.
Step 5: Once you have customized your chat widget, click on the “Install” button located at the top right corner of the screen.
Step 6: In the installation options window, select “Install manually.”
Step 7: Copy the provided installation code snippet.
Add Hubspot Live Chat Code to Webflow
Now that we have generated the necessary code from our Hubspot account, let’s add it to our Webflow site.
Step 8: Log in to your Webflow account and open the project where you want to add the live chat widget.
Step 9: Navigate to the page where you want to display the live chat widget.
Step 10: Open the custom code settings for that page by clicking on the gear icon in the left sidebar and selecting “Page Settings.”
Step 11: In the “Custom Code” tab, paste the installation code snippet provided by Hubspot into the “Head Code” field.
Step 12: Click on “Save Changes” to apply the changes to your Webflow site.
Preview and Publish
Now that you have added the Hubspot live chat code to your Webflow site, it’s time to preview and publish your changes.
Step 13: To preview your site with the live chat widget, click on the eye icon located at the top right corner of the Webflow Designer. This will open a new tab with a live preview of your site.
Note: If you don’t see the live chat widget in your preview, make sure that you are not logged in as an admin or that you haven’t excluded yourself from seeing it in Hubspot’s Targeting options.
Step 14: If everything looks good in the preview, go back to your Webflow project and click on “Publish” to make your changes live. Your visitors will now be able to see and use the Hubspot live chat widget on your Webflow site.
Congratulations! You have successfully added Hubspot Live Chat to your Webflow site. Now you can engage with your visitors in real-time, provide them with instant support, and improve their overall experience on your website.