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?

Prerequisites

We assume you are well acquainted with the HubSpot CMS CLI and have already set up a development environment. If not, please take a look at the Quickstart guide to developing on the HubSpot CMS first.

No account

It seems you don't have a Weavy account yet or not logged in. You can manually add the values, but it's recommended to sign up and go through our onboarding to get the values.

Weavy URL

This is the URL for your environment, usually ends with weavy.io

UIKit URL

CDN URL to the UIKit.

API Key

Copy and paste your API key here from your environment.

SSO or Contact

You need SSO or a cookied contact (a visitor filling out a form will be a cookied contact) for this tutorial to work. The serverless function uses the context object to access the contact object to populate basic contact properties. Read more here.

If the serverless function fails to get a contact, it has a fallback by creating a Demo User.

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

Private App Access Token

Paste the access token for the private app you just created.

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

https://

HubSpot Site URL

/_hcms/api/get-access-token

To access the new endpoint, we need the public-facing URL to your site.

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.

Quickstart

Add Weavy to HubSpot CMS CLI

Prerequisites

No account

SSO or Contact

1. Create private app

2. Create serverless function

3. Modify wy-auth.js

4. Create a module

5. Modify meta.json

6. Modify fields.json

7. Modify module.html

8. Take it for a test run

On this page

Support

AI

Messenger

Chat

Feeds

Files

Comments

Cloud

Meetings

Retool

Refine

React

JavaScript

Angular

Vue

Hubspot

Don't see your technology?

All documentation

Changelog

API reference

System status

About

Hackathons

Careers

Contact

Quickstart

Add Weavy to HubSpot CMS CLI

Prerequisites

No account

SSO or Contact

1. Create private app

2. Create serverless function

3. Modify wy-auth.js

4. Create a module

5. Modify meta.json

6. Modify fields.json

7. Modify module.html

8. Take it for a test run

On this page

Support