Make your product guidance part of your team efforts and Experiences an integral part of your growth stack with our HubSpot integration.

Target better messages, enable customers to connect with you directly in your product, and gather data as your users engage with your Experiences.


Availability & Usage

🔐 Available for Growth & Enterprise

📍 Ready to power your Tours, Tooltips, Microsurveys, Launchers

📩 Contact us to discuss your plan needs

⚙️ Configure it from the Dashboard


Quick access


How does this integration work?

You can leverage HubSpot to power your Chameleon Experiences and ensure your customers can always reach you where they need to. By connecting your HubSpot account, you will be able to:

  • Set HubSpot as a data source: Get your HubSpot Lists data into Chameleon (for targeting Experiences).

  • Set HubSpot as a data destination: send Chameleon events to HubSpot (to help target and customize your campaigns).

  • Use Chameleon in a Hubspot Workflow: Use HubSpot Static List membership to trigger a Chameleon Experience as a stage in a Workflow.

  • Open the HubSpot chat widget from a Chameleon Experience.

  • Open the HubSpot modal in-app using Chameleon.


Connect to HubSpot

To leverage your HubSpot data within Chameleon, you'll have to connect your account using OAuth. This enables Chameleon to receive data that you can use for targeting. Once your account is connected, you can sync your Lists and deliver Experiences to them.


Set HubSpot as a data source

Configuring HubSpot as a data source will allow you to leverage your HubSpot Lists to target Chameleon Experiences.

💡 HubSpot Lists are dynamic groups of users within HubSpot that can change based on attribute and event conditions. You can, for example, define Lists for new leads from a specific marketing announcement, enterprise trial accounts, etc. 🤓

After you connect your HubSpot account, you will be able to select which lists you'd like to leverage within Chameleon by syncing those. You can do this under "Sync with your HubSpot Lists".

Once you have a list synced, it will be displayed on a table from where you can review a group of data about it, namely:

  • When it was last imported.

  • How long it took to import.

  • How many members it contains.

  • The status of the import.

You can also manually sync your list, or stop syncing it altogether and remove it from Chameleon, by using the trash button.

This integration uses a "polling" method to check for list membership (roughly every 6 hours) and is more performant with fewer lists. For this reason, we encourage you to only sync the lists that you intend to leverage when targeting Chameleon Experiences.

👉 You can also get data from HubSpot in real-time using webhooks.

Using my data in Chameleon

The Hubspot Lists that you sync with Chameleon can be used when building Segments for your Chameleon Experiences. When building your Segment, simply choose your Hubspot List, and whether to show the Experience to users that are members of that List, or users who are not members of that List.

Chameleon will recognize members of your HubSpot Lists by matching the email field of the users in List to the email that is sent to Chameleon for each user in your app (either via the Chameleon snippet or via Twilio Segment).

💡 To use a custom attribute from the HubSpot Contact record to match your Chameleon users contact us and we can help set up the connection.


Set HubSpot as a data destination

Configuring HubSpot as a data destination will allow you to send Chameleon events into your HubSpot account. These events include, but are not limited to:

  • Chameleon Tour Started

  • Chameleon Microsurvey Completed

  • Chameleon Step Seen

  • Chameleon Button Clicked

💡 To learn more about the events that Chameleon collects read the article on the analytics that Chameleon provides.

To start sending Chameleon data to HubSpot, you just need to enable the "Send Chameleon data to HubSpot" toggle, from the Hubspot integration page in your Dashboard.

Once this is enabled, Chameleon will leverage the HubSpot code snippet loaded on your product's pages to send events from the client-side to your HubSpot account. You can then review these events within HubSpot.


Note: For Chameleon to be able to send data, HubSpot must be installed on the page wherever the Chameleon event took place.


❶ Set up button additional Actions to update existing user properties in your HubSpot Contacts list, for every user who clicks a Chameleon button.

All you have to do is create your properties in HubSpot and define the same ones for your button Actions; you'll see your data updating as users go through your Experiences. You can leverage different properties for each button, as long as that serves your purpose.

👉 This method is ideal if you want to update one property at a time, for each user that engages with your Experiences.

💡 Take it one step further, and set up specific workflows in your HubSpot account to trigger whenever a property gets updated. This enables your team to engage your users even better.

❷ If you want to update multiple user properties at a time, you can leverage the same button Actions, with the Run custom code option. This leverages HubSpot's identification method and allows for more manual control via their API.

To do this, add in the code snippet, including the HubSpot identify method, the user email, and any properties you want to update in your account. This method enables you to update an existing user, contact, or create a new one (based on the user's email address). If the email exists in your account, the properties you add will be updated; if not, it will create a new entry with that email and the new properties.

💡 You can also leverage merge tags with this option to send dynamic data based on the different users you have.

📺 Check out the step-by-step flow in the video below.

👉 You can also send data to HubSpot using webhooks

Example use case

Having Chameleon sending events to your HubSpot account can be great, for example, to coordinate your in-product Experiences along with your emails.

For example, you can send a follow-up email to someone who dismisses an Experience, or more information to a user who opts in to learn more.


Opening the Hubspot modal in-app using Chameleon

An interesting way to leverage your Chameleon Experiences to seamlessly connect with your audience is by triggering the modal from a Chameleon Experience, allowing users to schedule a meeting directly from your app.

If HubSpot is installed in your app, you'll just have to enable this from the Dashboard:

Next, set an Additional Action to trigger the HubSpot meeting modal to show as soon as your users engage with a button in a Chameleon Experience. Select your button, go to Additional Actions, pick HubSpot and paste in your scheduling URL.

Now, once a user clicks your button a calendar modal will pop up and they will be able to put some time down on your calendar. Make it count. 😉

💡 After the HubSpot modal is launched, users must manually close this, so beware if you have other Steps appearing after this. You can use this Typeform troubleshooting method to prevent a Tour Step to display until your HubSpot modal is off the screen, to keep a seamless user experience, or use Step triggers to require the user to take another action (such as a click on a specific element in your product) before the next step is shown.

This enables users to schedule calls with you, at their convenience. Here are some ideas to leverage this integration:

  • Get feedback on a new feature or beta test.

  • Offer a customer success webinar to help users learn more about your product.

  • Get feedback when users need more help figuring things out.


Use Chameleon in a Hubspot Workflow

HubSpot Workflows are a key way to coordinate your marketing campaigns and Chameleon as a part of a workflow. This way, you can leverage multi-channel messaging for better engagement and conversion.

To use Chameleon as a stage of a Workflow, use a Workflow stage for adding the Contact to a Static list. Then create a Segment in Chameleon to target the Experience to anyone who is a member of this ContactList.


Trigger the HubSpot chat widget

You can also use your Chameleon Experiences to seamlessly connect with HubSpot and trigger the chat widget directly from your Tours, Microsurveys, or Launchers.

Run a custom code script to call the HubSpot Conversations API and open the chat widget, by using the following code:

window.HubSpotConversations.widget.open();

👉 Explore what else you can achieve with custom scripts within Chameleon


Legacy Integration

The details outlined below refer to a deprecated version of the Hubspot integration. It will only be relevant if you have been using the existing Hubspot integration prior to 2021. We strongly encourage you to switch to the newer version of the integration (outlined above) which includes the following key benefits:

  • More frequent syncing (every 6 hours, instead of every 24 hours)

  • Clearer information about which lists have been synced and when

  • Easier configuration and management, via the Chameleon dashboard

After 1 March 2021, we will automatically transition all remaining filters to use the new integration and remove this integration from the Chameleon product.


Find out more...

Did this answer your question?