Generally, the chatbot helps us automate your customer service. It allows customers the option of self-service and answers to a range of questions quickly & easily at any point. It is also a key to optimize sales pages for a high conversion rate by engaging them on a more personal level. With Hippo Video, you can now integrate the HubSpot chatbot inside the Sales page templates of Hippo Video.
Requirements:
Hippo Video Account. Sign-up here if you are a new user.
HubSpot Account.
To navigate to the sales page templates:
Log-in to Hippo Video with your existing credentials.
Hover the mouse over the HV Studio icon in the left navigation bar and click on the Sales Page Templates.
You will be redirected to the Sales Page Templates page.
Note: When you hover over each tag in the All Templates section, you'll see the Add More button; To learn more about sales pages, click here.
To integrate a HubSpot chatbot inside the sales page templates:
Go to any one of the tabs on the left panel. Here for example, select the Prospecting tab and click on the Add More button at the top right.
The Prospecting Templates slider will appear with various templates.
Hover the mouse over the template of your choice. Let’s select the Pitch Wireframe template.
You can either Preview your template.
Or click on the Use button. All the elements that are available on the preview page are customizable but the primary video cannot be added during the creation of the sales page. It can only be added when you share them with your prospects. Based on the branding permissions, the user will be able to edit the branding settings.
Note: Please refer to this article for more detail about branding and non-branding elements; To learn more about element usage, click here.
Below the primary video, click the button and select the option Chat from the drop-down & do the green tick.
You’ll notice the options listed at the top based on your selection.
Here, you can change the button text, button color, font type, font size, & font style; select chat type (chat used).
Select HubSpot from Chat used drop-down and click the Chat configuration link.
The HubSpot configuration dialog will appear.
Note: The Chat channel must be connected to your HubSpot account.
To get the tracking code from HubSpot:
Step 1: Connect your chat channel inside HubSpot:
Log in to HubSpot using existing credentials.
Click on the Settings icon at the top right corner and click on the Inbox > Inboxes from the left-side panel.
Select the Channels tab and click on the Connect a channel button.
Click on the Chat card.
Enter the details to create your first chatflow and then click on the Next button at the bottom right.
Enter the chat availability details and then click on the Next button at the bottom right.
Check out the preview of your chatbot and how it appears on your website.
Then, click on the Publish button at the bottom right.
Finally, the chat channel is connected.
Step 2: Get the Tracking Code from HubSpot:
Inside your HubSpot account, click on the Settings icon at the top right corner.
Click on Tracking & Analysis > Tracking Code from the left side panel.
Click the Copy button and copy the Embed Code.
Navigate to Hippo Video and paste the tracking code.
Once you’ve done this, click Save.
Note: The * symbol indicates that the fields are mandatory to embed the chatbot inside the sales page.
You shall receive a confirmation message at the top of the page.
By clicking the Edit configuration link, you can modify the chatbot anytime.
Once you’ve done that, click Save and Next at the bottom right.
You’ll be redirected to the sales page settings screen.
Fill in the fields required such as,
Sales page template name - Name your sales page template.
Video Flow Settings - Check the box to allow users to edit non-branding settings within video flows, or uncheck it to restrict them from doing so.
Visibility - Select users or groups or everyone in the organization.
Share with everyone in the organization - If you want to share the sales page template with everyone in the organization, check the box else uncheck the box.
Tags - By default, all the appropriate tags will be mapped to the sales page template. If you want you can add more tags and remove the existing tags but it is mandatory to have at least one tag to save the page.
Thumbnail - The thumbnail will be automatically loaded. You can change it if you want.
Note: The recommended thumbnail dimension for the entire page is ‘320*180’. However, depending on the device, this may or may not work.
Click on ‘Save and Next’.
You shall be redirected to the Sales Page Template preview page.
Note: Please follow the steps below if you do not wish to link the chatbot with the CTA button but rather wish to appear on the sales page automatically.
To integrate the HubSpot chatbot for the existing sales page templates:
Go to the Sales Page Templates and choose your preferred template from the listing where you wish to embed the HubSpot chatbot.
In the Sales Page Templates Preview, click on Integrate > HubSpot from the right tab.
Enter the tracking code and click Save. Now, you’ve successfully added the chatbot to your sales page template.
Note:
The * symbol indicates that the fields are mandatory to embed the chatbot inside the sales page.
Click the Disable option to disable the integration from the sales page and the Delete option to delete the code from the Tracking Code.
How do I customize the chatbots that appear on the sales page templates?
Go to your HubSpot account.
On the top right corner, click on the Settings icon.
Click on Inbox > Inboxes from the left side panel.
Hover the mouse over the chat and click Edit.
You’ll find various options to customize your chatbot such as Chatbot display color, Chat widget placement (left/right), etc.
Once done, click Save at the bottom left corner. The changes will get applied to the upcoming chatbot.
Note: In the case of multiple chatbots inside HubSpot, you have an option to decide when the bot should appear on your sales page by setting conditions in the Target section inside HubSpot. For more details, please click here, to learn and explore the possibilities.
To check out other topics related to sales page templates.
