How to Deliver Custom ATC Content Tokens via HubSpot to a Webflow Web Page

Marketers often face a choice between building their website on Webflow or using HubSpot’s CMS, especially if they are already leveraging HubSpot’s Marketing Hub and Sales Hub for lead generation and customer management. While HubSpot’s CMS integrates seamlessly with its marketing and sales tools, Webflow offers unique benefits that make it a strong contender for web design and development, particularly for marketers who prioritize design flexibility and a powerful visual editing experience.

For Air Traffic Control customers who want to take advantage of this powerful integration, you can still deliver completely personalized web experiences through a Webflow website using HubSpot properties (personalization tokens).

This blog post includes a detailed process, including code snippets, for those who want to achieve rich personalization using ATC properties on a Webflow website.

Fire, here are key reasons a marketer may choose Webflow over HubSpot’s CMS:

• Design Flexibility: Webflow provides unparalleled creative control through its visual drag-and-drop editor, allowing marketers to create custom designs without needing to write code. Its flexibility can cater to highly specific branding and UX requirements, making it ideal for marketers who prioritize aesthetics and want complete control over design.
• CMS for Designers: Unlike HubSpot’s CMS, which is often more marketer-oriented, Webflow is built with designers in mind. Its ability to manipulate CSS, HTML, and JavaScript directly through a user-friendly interface enables designers to create more sophisticated, responsive, and pixel-perfect websites.
• No Template Restrictions: Webflow allows marketers to build from scratch without the limitations of predefined templates. This is particularly important for businesses looking to differentiate their website from competitors and avoid the “cookie-cutter” feel that can sometimes arise with template-based designs.
• Webflow’s CMS and Interactivity: Webflow’s CMS is highly flexible and works well with dynamic content. It allows marketers to create custom content structures and add interactivity through animations and interactions built directly into the platform, offering a more engaging experience for users.
• Cost Efficiency for Design-Heavy Projects: For marketers focusing heavily on the design and customization of their website, Webflow can sometimes be more cost-effective than HubSpot’s CMS, which may include features that aren’t always necessary for front-end development projects.
• Scalability and Custom Hosting Options: Webflow offers marketers the ability to choose their hosting provider, making it easier to scale and handle large traffic volumes. Additionally, its fast global CDN (Content Delivery Network) ensures site performance, which is critical for SEO and user experience.
• Separation of CMS from Marketing Tools: Marketers might prefer keeping their CMS and marketing automation platforms separate to avoid dependency on a single vendor for all functionalities. Webflow integrates with HubSpot for lead management while still allowing the marketer to enjoy Webflow’s web design and development features.
  
  In conclusion, deciding whether to use Webflow or HubSpot’s CMS as a HubSpot customer depends on the marketer’s specific goals. If the marketer prioritizes ease of integration, built-in HubSpot functionality, and simple content management, HubSpot’s CMS may be the better option. However, if design flexibility, creative control, and a more advanced visual editor are crucial to the project, Webflow could offer a stronger foundation. The best approach is to evaluate the importance of design control versus integrated marketing tools and choose the platform that aligns with the company’s primary objectives.

Requirements for Developer to Set Up HubSpot Properties in Webflow Landing Page

Every good development project starts with baseline requirements:

• Access: Ensure that the company has access to both Webflow and HubSpot. The developer must have API access to both systems and be familiar with the REST APIs for both platforms.
• HubSpot API Key or OAuth: The company should have a HubSpot API key or OAuth credentials to authenticate API requests.
• Webflow API Access: Ensure Webflow API access, and obtain the collection ID where the content will be displayed.

Step-by-Step Instructions for the Developer

Step 1: Create a HubSpot Integration

1. HubSpot API Authentication:
   • Obtain the HubSpot API key or OAuth credentials.
   • Use these credentials to authenticate API calls to HubSpot.
2. Identify the HubSpot Properties:
   1. Fetch all the [ATC] properties from HubSpot's CRM. For example, the top recommended blog for each contact will include the following properties:
      • [ATC_Blog_Headline_1]: Text field representing the blog headline.
      • [ATC_Blog_Image_1]: URL for the image to be displayed.
      • [ATC_Blog_Link_1]: URL for the call-to-action button.
      • [atc_blog_meta_description_1]: Text field containing the content's meta description.
      • [atc_blog_summary_1]: Text field containing the content's summary. 
   2. Example API request
      
         ```bash
         curl --request GET \
         --url 'https://api.hubapi.com/crm/v3/objects/{objectType}/{objectId}?properties=ATC_Blog_Headline_1,ATC_Blog_Image_1,ATC_Blog_Link_1,atc_blog_meta_description_1,atc_blog_summary_1' \
         --header 'Authorization: Bearer YOUR_ACCESS_TOKEN'
         ```

Step 2: Create a Webflow CMS Collection

1. Define a CMS Collection:
   • In Webflow, create a CMS Collection with the following fields:
     • Text field: `ATC blog headline 1` for `ATC_Blog_Headline_1`.
     • Image field: `ATC blog image 1` for `ATC_Blog_Image_1`.
     • URL field: `ATC blog cta_link 1` for `ATC_Blog_Link_1`.
     • Text field: 'ATC blog meta description 1' for 'atc_blog_meta_description_1'.
     • Text field: 'ATC blog summary 1' for 'atc_blog_summary_1'.
2. Design the Landing Page in Webflow:
   • Add a text block for the headline and link it to the `headline` field in the CMS.
   • Add an image element and bind it to the `image` field in the CMS.
   • Add a button element and set its URL to the value of the `cta_link` field. (you can also use the meta description and/or the summary based on how you want to lay things out)

Step 3: Connect HubSpot Data to Webflow CMS Using API

1. Write a Script to Fetch HubSpot Data:
   • Create a script that uses the HubSpot API to retrieve data for `ATC_Blog_Headline_1`, `ATC_Blog_Image_1`, `ATC_Blog_Link_1`, 'atc_blog_meta_description_1', and 'atc_blog_summary_1'.  
2. Push Data to Webflow CMS:
   
   • Use Webflow’s CMS API to push the retrieved HubSpot data into Webflow’s CMS. You will need the collection ID and item ID in Webflow.
   • Example API request:
     • ```bash
          curl -X PATCH https://api.webflow.com/collections/{collection_id}/items/{item_id} \
          -H 'Authorization: Bearer {access_token}' \
          -H 'accept-version: 1.0.0' \
          -H 'Content-Type: application/json' \
          -d '{
                "fields": {
                  "headline": "Fetched Headline from HubSpot",
                  "image": "https://example.com/image.jpg",
                  "cta_link": "https://example.com"
                }
              }'
          ```

Step 4: Automate Updates

1. Create Webhooks in HubSpot:
   • Set up webhooks in HubSpot that trigger when `ATC_Blog_Headline_1`, `ATC_Blog_Image_1`, `ATC_Blog_Link_1`, 'atc_blog_meta_description_1', or 'atc_blog_summary_1' are updated. This will notify your integration script to fetch and update data on Webflow in real-time.
2. Schedule Data Sync:
   • Optionally, you can set up a periodic job (using a cron job or automation service like Zapier or Integromat) to regularly sync HubSpot properties to Webflow.

Summary

By following these steps, HubSpot properties will be dynamically displayed on your Webflow landing page. The headline, image, CTA link, meta description, and summary will be pulled from HubSpot and updated on Webflow using their respective APIs. This means every web experience can be 100% personalized to the individual!