{"id":4405,"date":"2024-04-15T02:03:41","date_gmt":"2024-04-14T18:03:41","guid":{"rendered":"https:\/\/webflow.tenten.co\/?p=4405"},"modified":"2024-04-15T02:03:41","modified_gmt":"2024-04-14T18:03:41","slug":"establish-connections-in-hubspot-using-webflow-logic","status":"publish","type":"post","link":"https:\/\/webflow.tenten.co\/en\/establish-connections-in-hubspot-using-webflow-logic\/","title":{"rendered":"Establish connections in HubSpot using Webflow Logic"},"content":{"rendered":"\n
\n

HubSpot is a widely-used Customer Relationship Management (CRM) system where you can monitor customer data and optimize sales and marketing strategies. By utilizing Logic, you can efficiently transfer contacts from a form submission to Hubspot and integrate your Webflow portal with your CRM.<\/p>\n

To begin:<\/strong> If you have not done so already, set up an account on HubSpot<\/a>. Additionally, ensure you have included a form on your Webflow site with fields that align with the required fields in HubSpot.<\/h6>\n

Within this tutorial, we will discuss:<\/p>\n

    \n
  1. The process for generating your HubSpot API key<\/li>\n
  2. Setting up the authentication for your Logic workflow<\/li>\n
  3. Locating the HubSpot API documentation<\/li>\n
  4. Configuring the HTTP request settings<\/li>\n
  5. Testing and deploying your workflow<\/li>\n
  6. Troubleshooting potential issues with your workflow<\/li>\n<\/ol>\n

    Generating your HubSpot API key<\/h2>\n

    Keep in mind:<\/strong> HubSpot offers a choice between 2 authentication methods<\/a> (OAuth and private app access tokens). This guide focuses on the private app access tokens<\/strong> method.<\/h6>\n
      \n
    1. Access your HubSpot account<\/strong> and proceed to create a private app<\/a>, if not done already<\/li>\n
    2. Select the Scopes<\/strong> tab and indicate the actions you intend to perform using this API key under the CRM<\/strong> dropdown (ensure to pick at least crm.objects.contacts.write<\/strong> to send contacts to Hubspot)<\/li>\n
    3. Click Show token<\/strong> and copy your API key<\/strong><\/li>\n<\/ol>\n

      Configuring the authentication for your Logic workflow<\/h2>\n
        \n
      1. Open your Webflow site in the Webflow Designer by launching a new tab<\/li>\n
      2. Choose your form on the Designer canvas and access Form settings<\/strong><\/li>\n
      3. Select the Source<\/strong> dropdown and opt for Logic<\/strong><\/li>\n
      4. Click Add new flow<\/strong><\/li>\n
      5. Name your new flow (e.g., \u201cEstablish connections in HubSpot\u201d) in the Name<\/strong> field and optionally add a description in the Description<\/strong> field<\/li>\n
      6. Drag a Make HTTP request<\/strong> block to the flow editor canvas and assign a name (e.g., “Initiate new contact in HubSpot”)\u00a0<\/li>\n
      7. From the Authentication<\/strong> dropdown menu, select API token<\/strong><\/li>\n
      8. Choose Header<\/strong> from the Add to<\/strong> options<\/li>\n
      9. Input \u201cAuthorization\u201d in the Header<\/strong> field<\/li>\n
      10. Click Select a credential<\/strong> > Add new credential<\/strong><\/li>\n
      11. Name your API token (e.g., \u201cHubSpot API token\u201d) in the Name<\/strong> field and provide a description in the Description<\/strong> field if needed<\/li>\n
      12. Enter \u201cBearer {API key}<\/strong>\u201d in the Token<\/strong> field, replacing {API key}<\/strong> with the copied API key from HubSpot<\/li>\n
      13. Save your new credential by clicking Create<\/strong> and ensure to keep this tab open<\/strong>!\u00a0<\/strong><\/li>\n<\/ol>\n
        Pro tip:<\/strong> Alongside, you can link your form to a new Logic workflow from the Logic panel<\/strong> > Flows<\/strong> tab. Further insights about form submission triggers can be found in Logic.<\/h6>\n
        \n
        \"Options<\/div>
        The connection between a form and Logic can be established via Form settings, Form block settings, or from the <\/em>Logic panel<\/em><\/strong> > <\/em>Flows<\/em><\/strong> tab.<\/em><\/figcaption><\/figure>\n
        \n
        \"\u201cHeader\u201d<\/div>\n<\/figure>\n
        \n
        \"The<\/div>
        For APIs employing bearer authentication (e.g., HubSpot), remember to insert \u201cBearer\u201d before your API key in the <\/em>Token<\/em><\/strong> field.<\/em><\/figcaption><\/figure>\n

        Locating the HubSpot API documentation<\/h2>\n
          \n
        1. Visit the HubSpot API reference documentation<\/a><\/li>\n
        2. Scroll down to CRM<\/strong> located in the left panel<\/li>\n
        3. Navigate to Objects<\/strong> > Contacts <\/strong>> Create contacts<\/strong><\/a> and retain this tab open <\/strong>for guidance!<\/li>\n<\/ol>\n

          Configuring the HTTP request settings<\/h2>\n

          After setting up your Logic flow and HubSpot authentication credentials, return to Webflow to define an HTTP request in your flow. The HTTP request configuration at this stage will establish a new contact in Hubspot upon each form submission by a visitor.<\/p>\n

          Note:<\/strong> In case you closed the tab where your Webflow site was open, navigate to Logic panel<\/strong> > Flows<\/strong> tab and select the flow created in the previous steps. Click on the Make HTTP request<\/strong> block on the flow editor canvas to open block settings and proceed with the following steps.<\/h6>\n
            \n
          1. Choose POST<\/strong> from the Request method<\/strong> dropdown<\/li>\n
          2. Paste \u201chttps:\/\/api.hubapi.com\/crm\/v3\/objects\/contacts\u201d in the URL<\/strong> field<\/li>\n
          3. Click on the \u201cplus\u201d icon adjacent to Headers<\/strong> to add a new header<\/li>\n
          4. Input \u201ccontent-type\u201d in the Name<\/strong> field and \u201capplication\/json\u201d in the Value<\/strong> field\u00a0<\/li>\n
          5. In the Body<\/strong> field, paste the code snippet for creating contacts<\/strong> provided in HubSpot\u2019s API documentation<\/a> \u2014 it will resemble this (yet contain properties\n
          6. <\/li>\n<\/ol>\n
            \n
            \n
            \n    {\n        \"organization\": \"Biglytics\",\n        \"contact-email\": \"bcooper@biglytics.net\",\n        \"givenname\": \"Bryan\",\n        \"surname\": \"Cooper\",\n        \"telephone\": \"(877) 929-0687\",\n        \"webpage\": \"biglytics.net\"\n      }\n    <\/code><\/pre>\n<\/div>\n<\/div>\n
            To proceed, you will have to incorporate live information into your HTTP request for collecting data from the submissions you receive via your forms:<\/p>\n
              \n
            1. Erase the existing content from your HubSpot contacts, and position your cursor within the empty quotation marks in the Content<\/strong> section<\/li>\n
            2. Choose the violet \u201cdot<\/strong>\u201d symbol and pick the corresponding dynamic form element (for instance, name, email, etc.)<\/li>\n<\/ol>\n
              \n
              \"The<\/div>\n<\/figure>\n
              \n
              \"The<\/div>
              An entire POST request to Hubspot from Logic\u2019s Construct HTTP request block.<\/em><\/figcaption><\/figure>\n
              The procedure to test and release your sequence<\/h2>\n
                \n
              1. Press Execute test to finalize configuration<\/strong><\/li>\n
              2. Input test values into their appropriate fields<\/li>\n
              3. Press Execute test<\/strong><\/li>\n
              4. Tap on Terminate<\/strong> or Accept data<\/strong> to leave the test mode<\/li>\n
              5. Click on Make public<\/strong><\/li>\n
              6. Hit Prepare flow for publication<\/strong><\/li>\n
              7. Proceed with publishing your website<\/li>\n<\/ol>\n
                Tip: <\/strong>If you encounter an error notification during the test process, address the issues by following our problem-solving measures, and then repeat the aforementioned steps. Discover additional details about examining HTTP requests.<\/h6>\n
                Procedures for addressing concerns within your sequence<\/h2>\n
                If you come across an error while testing your sequence, attempt the following measures:<\/p>\n