EVENT: Forge new frontiers: The Weavy + Atlassian Forge hackathonRead more
Quickstart

Add Weavy to HubSpot CMS CLI

Here's an end-to-end example of adding Weavy to HubSpot CMS CLI as a module.

These code snippets include using the contact cookie, getting the page context, syncing the user to Weavy, and getting an access token.

Have HubSpot CMS CLI ready, set the parameters to unlock the tutorial, and get started.

Don't have the parameters? Sign up for free or sign in and set up your environment to get the parameters.

Looking for how to do it with HubSpot CMS Design Tools?

1. Create private app

To access the HubSpot API and get contact details, we need a private app;

  • Go to Settings in HubSpot 
  • Find Integrations in the menu and expand
  • Click Private apps and Create a private app
  • Click Scopes in the top
  • Expand CRM and check Read for crm.objects.contacts
  • Create the app (top right)
  • Copy the access token value
  • Paste the access token in the input field below

2. Create serverless function

First, we need to create a serverless function that will;

  • Find who is logged into your site
  • Sync that user with Weavy
  • Issue an access token from Weavy

Go to the folder in your project where you want to create your serverless function.

Run this in your terminal in the HubSpot project folder 
hs create function wy-auth
  • Name folder to wy-auth
  • Name JavaScript file to wy-auth
  • Set HTTP method to GET
  • Set the path portion of the URL to get-access-token
  • Input your HubSpot Site URL below

3. Modify wy-auth.js

Open the wy-auth.js in the newly created folder wy-auth and replace the code with below.
Modify wy-auth.js - replace with this code 
const WeavyURL = 'WEAVY_URL';
const WeavyAPI = '********************';
const HubSpotAccessToken = '-*-*-*-*-*-*-*-*-*-*-*-*';

exports.main = async (context, sendResponse) => {

  var fullName = 'Demo User';
  var email = 'demo@user.com';
  var uid = 'uid-demouser';

  try {
    let hsContact = await fetch('https://api.hubapi.com/crm/v3/objects/contacts/' + context.contact.vid, {
      method: 'GET',
      headers: { 'Authorization': 'Bearer ' + HubSpotAccessToken }
    });
  
    if (hsContact.ok) {
      
      let hsContactData = await hsContact.json();
  
      var fullName = hsContactData.properties.firstname + ' ' + hsContactData.properties.lastname;
      var email = hsContactData.properties.email;
      var uid = 'uid-' + hsContactData.properties.hs_object_id;

    }
  } catch(e) {}
  
    let user = await fetch(WeavyURL + '/api/users/' + uid, {
      method: 'PUT',
      headers: { 
        'content-type': 'application/json',
        'Authorization': 'Bearer ' + WeavyAPI
      },
      body: JSON.stringify({
        "name": fullName,
        "email": email
      })
    });

    if (user.ok) {
      let response = await fetch(WeavyURL + '/api/users/' + uid + '/tokens', {
        method: 'POST',
        headers: { 
          'content-type': 'application/json',
          'Authorization': 'Bearer ' + WeavyAPI
        }
      });

      if (response.ok) {
        let data = await response.json();
        sendResponse({ 
          body: JSON.stringify(data), 
          statusCode: 200 
        });
      } else {
        sendResponse({ body: { error: response.statusText }, statusCode: 500 });
      }
    }
};
  • Line 7-9 - if we fail to get the contact details, we create a fallback user called Demo User
  • Line 12 - fetching the logged-in user details using the HubSpot API and the access token for the private app, using the vid found in the context object.
  • Line 21-23 - fetching contact details from HubSpot and creating a UID for Weavy based on the ID in HubSpot.
  • Line 28 - using the collected user information to create/update the user in Weavy with full name and email.
  • Line 41 - issuing an access token from Weavy using the UID and return if successful.

4. Create a module

Go to your modules folder to create a new module.
Run in your modules folder 
hs create module weavy-block
  • Label the module Weavy Building Block, so it's easy to find later.
  • Select Page as the type of content this module can be used in
  • Select N for is this a global module 

5. Modify meta.json

Modify meta.json in the folder for the newly created module - replace with this code 
{
  "label": "Weavy Building Block",
  "css_assets": [],
  "external_js": [],
  "global": false,
  "help_text": "",
  "host_template_types": [
    "PAGE"
  ],
  "js_assets": [],
  "other_assets": [],
  "smart_type": "NOT_SMART",
  "tags": [],
  "is_available_for_new_content": true
}

6. Modify fields.json

Modify fields.json in the modules folder - replace with this code 
[
  {
    "label": "Choose Building Block",
    "name": "building_block",
    "type": "choice",
    "choices": [
      ["wy-chat", "Chat"],
      ["wy-posts", "Feeds"],
      ["wy-files", "Files"]
    ],
    "display": "radio",
    "default": "wy-chat"
  }
]

7. Modify module.html

Modify module.html in the modules folder - replace with this code 
{% if is_in_editor %}
    <div style="background:#f5f8fa;border:1px dashed #aaa;text-align:center;padding:70px 0">
        HubSpot Editor Placeholder<br>for <strong>{{ module.building_block }}</strong>
    </div>
{% else %}
    {% require_js position="head" %}
    <script src="WEAVY_SCRIPT"></script>    
    <script>
        const weavy = new Weavy();
        weavy.url = "WEAVY_URL";
        weavy.tokenUrl = new URL("https://HUBSPOT_URL/_hcms/api/get-access-token");
    </script>
    {% end_require_js %}

    <{{ module.building_block }} uid="{{ module.building_block }}-{{ name }}-{{ content_id }}"></{{ module.building_block }}>
{% endif %}
  • Line 11 - get an access token from your serverless function
  • Line 15 - rendering the building block the editor chosen with an UID using the widget ID - making it unique so you can render multiple building blocks on the same page.

8. Take it for a test run

Navigate to Marketing > Website > Website Pages in HubSpot and create a new page.

Search for the Weavy Building Block module, drag and drop it into the page, and choose what building block you want to render.

In the editor, you'll see "HubSpot Editor Placeholder" where the building block will be rendered. To see and try the building block preview or publish the page.

Don't see anything? Make sure that HubSpot contacts cookies are set from a form or similar.

On this page
Unlock the tutorial with your Weavy API key.