Optimize your customer experience with Lucky Orange, Twilio Segment, and HubSpot

Whether you’re in marketing or sales, leveraging Lucky Orange's user behavior analytics alongside HubSpot's CRM capabilities and Twilio Segment's data segmentation unlocks deeper insights into what current and potential future customers are doing on your website.

Businesses can expect to spot what website information and elements resonated with specific customer audiences for targeted marketing campaigns or to see what interested potential customers did on your website and landing pages before you make the sales call.

Every business wants the “secret sauce” to better understand their future customers and clients. Data points only get you so far in discovering what people really want from your business and what has stopped them from converting.

What if you could see what information a future customer was reading on your website? Or how would you reframe your sales email if you knew exactly how they engaged with specific web pages?

In this recipe, you’ll learn how visitor behavior is the missing link to driving effective marketing campaigns and helping you close the deal faster.

On this page

Step 1: Configure Lucky Orange as a destination in Twilio Segment

1. In your workspace, add Lucky Orange as a destination to begin sending identifying calls and events into it. 

Sign up or log into Lucky Orange. This and all integrations are available on any trial or plan, including the free plan.

2. Navigate to Settings and select Sites.

3. Copy the Site ID for your source website. You will need this to complete the new Lucky Orange Destination in Twilio Segment.

4. In Twilio Segment, navigate to Connections and select Catalog. Using the search field or scrolling, locate Lucky Orange. If you scroll to find it, Lucky Orange can be found under the “Heatmaps & Recordings” category.

5. Open the Lucky Orange catalog page and click Add destination.

6. When prompted, select a source and click Next. 

7. Add a destination name and select” Fill in settings manually” when asked how you would like to prepare the destination. Click Create destination to proceed. This will create the destination and open the Settings page.

8. The new destination’s settings page should open. To finish the destination, click on Site ID. It will be shown in red text.

9. Click into the Site ID field and paste your Lucky Orange site ID. Click Save.

10. Finally, click the gray toggle next to Setup Guide to activate the destination.  When activated, the toggle will turn blue.

Step 2: Connect HubSpot as a destination in Twilio Segment

Stay in your Twilio Segment workspace. Follow this recipe to add HubSpot as a destination in Twilio Segment or follow the instructions below.

1. From Twilio Segment, navigate to Connections and select Catalog. Search for and or scroll to find on HubSpot Cloud Mode (Actions). Click on the logo to continue.

2. When prompted, click Add destination on the HubSpot Cloud Mode (Actions) catalog page.

3. When prompted, select your Engage space and click the blue “Confirm Source” to proceed. 

4. You will be asked to authenticate with HubSpot followed by prompts to select an account to link to Segment. Give the destination a name and enable the destination by clicking on the toggle. Click Save Changes. For more information about using this destination, refer to this documentation. 

Step 3: Create an audience in Twilio Segment 

Stay in your workspace to create a new audience.

1. Navigate to Engage. Audiences will be the default view. Click on New audience.

2. Define your audience using the audience builder. Use the Preview button to test your audience. When ready, click Next.

3. Select your HubSpot destination you previously created in Step 2 and click Next.

4. Ensure that the toggle next to Send Identity is enabled and showing in blue. If not, click on the toggle to enable it. The toggle next to Send Track should remain disabled and in gray. Select Default Setup and click Save to proceed. 

5. Click Next to proceed to Review & Create. Enter in an audience name and optional description. Click Create Audience. 

Step 4: Configure HubSpot to receive Twilio Segment Audience data 

This will require you to work with both Twilio Segment and HubSpot. We recommend keeping both tabs open in the same browser window. 

1. From Twilio Segment, navigate to Engage and select the audience you created in Step 3. Click Settings and copy the audience key located under the audience name. Keep this tab open. 

2. In a new tab, open HubSpot. Click on the Settings cog in the top navigation to open settings. Select Properties from the left navigation, located under data management. For Select an object, use Contact properties (this will be selected by default). Click Create property.

3. Complete the following information:

a. Object type: Contact

b. Group: Contact information

c. Label: Paste your Audience key 

4. Click Next to move to Field type. For Field type, select Single checkbox. Click Next.

5. Click Create to add the property. Keep the HubSpot tab open.

6. Return to the tab with Twilio Segment. In the audience you created, select Overview. For the HubSpot destination you created, click Add Mapping.

7. Select Upsert Contact and complete as follows::

a. Section 1: Event type: Event type is Identify 

b. Section 2: Add test event: Click Load Test Event from Source. Your audience key should be within the traits object. If not, edit the traits object to include your audience key.

c. Section 3: Select Mappings: 

i. Enable Show test record preview and scroll to the bottom of the section to click Show all fields. This will open Other properties.

ii. In Other properties, click the Select event variable box. Search for your audience key in the search box. Do not paste your audience key into the Select event variable field. Select the event variable that begins with traits. and ends with your audience key.

iii. Paste your audience key in the field with the text Enter key name.

d. Section 4: Send test events: Click Send test event to destination. From the “response from destination,” copy the ID.

8. Return to the tab with HubSpot. Use the search field at the top of the page to paste the ID copied from Segment. Click the name of the contact to open it.

9. On the contact page, locate About this contact to the left of the page. Select the Actions dropdown and click View all properties. Look under Contact Information for your audience key to verify the property successfully updated in the customer’s profile.

10. Return to the tab with Twilio Segment. Now that you’ve confirmed the test, click Save to complete the mapping. Once the mapping is added, click the toggle to enable the mapping. When enabled, it will show in blue.
 

Step 5: Connect Lucky Orange with HubSpot

This step will integrate your Lucky Orange account with your HubSpot account. Before proceeding, make sure the email address used within the HubSpot account matches the email address used by your Lucky Orange account owner. The account owner is the person who initially set up the Lucky Orange account. Learn how to transfer Lucky Orange ownership here. 

1. In Lucky Orange, navigate to Settings from the left navigation and click on Integrations. Select HubSpot to open the HubSpot integration settings

2. Click the Connect toggle located under the HubSpot logo to begin the connection process

3. In the popup, select the HubSpot account you want to connect to. When prompted, accept the app permissions and scroll down to complete any required CAPTCHA images. Once connected, the HubSpot toggle on the integration page will say “Connected” and highlight the toggle in blue.

Step 6: Confirm HubSpot integration settings

By default, HubSpot form submissions will be captured once the HubSpot integration is connected. This will allow Lucky Orange to match your HubSpot contacts with a Lucky Orange user to pass the user’s events directly into their HubSpot contact page. 

It will also create a trackable event within Lucky Orange named “HubSpot Form Submitted” that can be used to trigger surveys or announcements, create a segment, or monitor activity from within the event manager. 

If this setting is disabled, we recommend enabling it. To do so, click on the toggle located at the far right of the “Capture HubSpot Form Submissions” card. 

Using a non-HubSpot form: How to pass in custom user data 

Using a HubSpot form will allow customer information to be passed through automatically into Lucky Orange and the visitor’s profile page. If using a non-HubSpot form, you’ll need to pass in additional custom user data based on the following code:

You can use the ready callback to trigger any code that relies on the LO object and will need to make sure that you await the module on LO that you are trying to use. 

Note: If you do not use the ready callback or $internal.ready() functions, you are likely to see errors such as "LO is not defined" or "Cannot read property of undefined."

Click here for more developer documentation from Lucky Orange. 

Step 7: Select Lucky Orange events to pass into HubSpot

Lucky Orange events capture key behaviors on your website. Some events are preloaded for you, such as a rage click (frustrated indicator) or conversation started (when someone begins a chat). You can also create your own events based on

• Page visits to track when visitors come from a specific URL, such as UTM parameters.

• Element interactions to track when visitors interact with a specific element on your website, such as a call-to-action button. 

• API to customize your parameter using our API, such as when a customer account is created.

 You can select what events you want to pass into the contact’s HubSpot page. 

From Lucky Orange, navigate to Settings and click Integrations 

Select HubSpot to open up the integration’s settings

For the setting, “Send Lucky Orange Events to HubSpot,” ensure that the toggle to the right is highlighted in blue and shows “Active.” If not, click on the toggle to enable. 

4. At the bottom of this setting, click on the gray box to begin identifying the events you want to pass into HubSpot. This will open a list of available events to select from or begin typing to go to specific events. 

5. Add events one at a time. Changes will be saved automatically

Step 8: Activate the Lucky Orange filter in HubSpot

From HubSpot, open a contact page. If this is your first time using the Lucky Orange integration, you need to activate the Lucky Orange filter. 

• Click on Filter Activity at the top of the contact page. Check the box next to “Lucky Orange”

Once activated on one contact page, it will be activated on all contact pages. 

Step 9: Explore HubSpot contact pages 

Now you’re set. Each contact’s timeline and sidebar are filled with information you can use to make immediate impacts on your current and future sales and marketing efforts.

From the contact’s profile, you’ll see the audience you created in Step 3 that is associated with the contact.

From the timeline, you will see the events you previously selected in Step 7. You can see exactly when the specific events were triggered and when the visitor took the path during their session.

From the sidebar, you get to see the data Lucky Orange captured for the visitor, such as session recordings, heatmaps, chat logs, and survey responses.

Connect the dots to understand how your target audiences are behaving and identify any emerging patterns. 

You can also set up an automated workflow in HubSpot to respond to user behaviors captured by Lucky Orange. For example, if a user repeatedly visits a product page, you can trigger an email campaign promoting that product to nurture them toward a conversion.

• Create a new workflow in HubSpot
  From HubSpot, click on Automation from the top navigation bar and select Workflows. You can create a new workflow from scratch or use a template that best fits your use case.

  Set enrollment criteria based on the Lucky Orange event data and/or custom objects that were created for your Twilio Segment audiences. For example, you can enroll contacts based on whether “Product Page Visits” is greater than a certain number.

  Define actions for the workflow, such as sending an email, assigning to a    sales rep, setting a reminder, or updating contact properties.

• Test the workflow
  Before you activate the workflow, test it using internal contacts to ensure it behaves as expected and is triggered under the correct conditions. Once you’re satisfied, activate the workflow to begin the automation process.

Wrapping up

By leveraging Twilio Segment audiences with HubSpot and Lucky Orange, you can combine insightful visitor behavior and event data with target audiences to empower your marketing and sales campaigns. In this growth recipe, we:

• Connected Twilio Segment with HubSpot and Lucky Orange.

• Created a Twilio Segment audience and passed the audience into HubSpot.

• Passed Lucky Orange events, session recordings, heatmaps, chat logs, and survey responses directly into each HubSpot contact page.

• Tied it all together for a proactive approach to customer engagement.