Unlocking the Power of Website Personalization with HubSpot and WordPress

Personalization is no longer optional – it’s expected. Tailoring your website’s content to the specific needs and interests of each visitor isn’t just a “nice-to-have”; it’s a proven strategy for driving engagement, building trust, and ultimately converting visitors into customers. At Air Traffic Control, we take this a step further by enabling hyper-relevant content recommendations through deep HubSpot integrations. But what if you’re running your website on WordPress? The good news is, you can seamlessly bring HubSpot’s contact property magic – including those generated by Air Traffic Control – directly to your WordPress web pages.

This blog post will walk you through how to leverage HubSpot contact properties to create highly personalized WordPress pages. We’ll also highlight the role Air Traffic Control can play in supercharging your personalization efforts.

Why Website Personalization Matters

Before diving into the technical details, let’s address why personalization is so powerful:

1. Higher Engagement: Personalized experiences keep visitors on your website longer.
2. Improved Conversions: Tailored content resonates better, leading to higher conversion rates.
3. Stronger Customer Relationships: Personalization builds trust and demonstrates that you understand your audience.

By connecting your website to HubSpot’s rich contact properties – especially those enhanced by Air Traffic Control’s recommendations – you can deliver this level of personalization at scale.

The Air Traffic Control Advantage

Air Traffic Control integrates deeply with HubSpot to enhance its already powerful CRM. Our solution analyzes your content library and contact data to create personalized content recommendations for each contact. These recommendations are then stored in HubSpot as custom contact properties, ready to be used across all your marketing channels – including your WordPress site.

Imagine this: A visitor lands on your WordPress site, and instead of seeing generic content, they’re greeted with blog posts, whitepapers, or product suggestions tailored specifically to their interests. With Air Traffic Control and HubSpot, this isn’t just possible – it’s straightforward.

How to Display HubSpot Contact Properties on Your WordPress Website

Let’s get practical. Here’s how you can create a personalized WordPress page that displays HubSpot contact property values for known visitors.

Step 1: Ensure HubSpot Tracking is Enabled on Your Website

To personalize content for visitors, you first need to identify them. HubSpot’s tracking code enables this by recognizing known contacts based on their cookies. If you haven’t already, install the HubSpot tracking code on your WordPress site.

Step 2: Create HubSpot Properties for Personalization

If you’re using Air Traffic Control, this step is handled for you. Our platform automatically creates and populates properties like:

• ATC_Blog_Headline_1: The title of a recommended blog post.
• ATC_Blog_Link_1: A URL to the blog post.
• ATC_Blog_Image_1: A thumbnail image for the blog post.

These properties can be displayed directly on your WordPress site to provide dynamic, personalized content.

Step 3: Add JavaScript to Identify Visitors

Use the following JavaScript snippet to retrieve a visitor’s contact ID and fetch their HubSpot properties:

<script type="text/javascript">
  document.addEventListener("DOMContentLoaded", function() {
    // Fetch the contact properties
    fetch(`/wp-json/hubspot/v1/contact`)
      .then(response => response.json())
      .then(data => {
        if (data && data.properties) {
          // Populate the page with personalized content
          document.getElementById('recommended-title').innerText = data.properties.ATC_Blog_Headline_1.value;
          document.getElementById('recommended-link').href = data.properties.ATC_Blog_Link_1.value;
          document.getElementById('recommended-image').src = data.properties.ATC_Blog_Image_1.value;
        }
      });
  });
</script>

Step 4: Create a Custom WordPress REST API Endpoint

In WordPress, you’ll need a REST API endpoint to securely retrieve HubSpot contact properties. Add this code to your theme’s functions.php file or a custom plugin:

add_action('rest_api_init', function () {
    register_rest_route('hubspot/v1', '/contact', array(
        'methods' => 'GET',
        'callback' => 'fetch_hubspot_contact',
        'permission_callback' => '__return_true',
    ));
});

function fetch_hubspot_contact($data) {
    $contact_email = $_COOKIE['hubspotutk']; // Example for identifying user; adjust based on your needs

    $response = wp_remote_get(
        'https://api.hubapi.com/crm/v3/objects/contacts/' . $contact_email . '?properties=ATC_Blog_Headline_1,ATC_Blog_Link_1,ATC_Blog_Image_1',
        array('headers' => array('Authorization' => 'Bearer ' . HUBSPOT_API_KEY))
    );

    if (is_wp_error($response)) {
        return $response;
    }

    return json_decode(wp_remote_retrieve_body($response), true);
}

Step 5: Display Personalized Content on Your Page

Use the following HTML structure in your WordPress page:

<div>
  <h2 id="recommended-title">Loading...</h2>
  <a id="recommended-link" href="#">
    <img id="recommended-image" src="" alt="Recommended Content">
  </a>
</div>

The JavaScript and API endpoint will dynamically populate these elements with personalized content for each known visitor.

Bringing It All Together

With the combination of HubSpot’s CRM, Air Traffic Control’s advanced personalization capabilities, and the flexibility of WordPress, you can create web experiences that feel tailored, relevant, and impactful. Whether you’re displaying personalized blog recommendations, targeted product suggestions, or custom calls-to-action, this integration opens up endless possibilities.

At Air Traffic Control, our mission is to help you deliver a personal future of revenue. If you’re ready to take your website personalization to the next level, get in touch with us or start your free trial today!