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

Add Weavy to HubSpot CMS using Design Tools

Here's an end-to-end example of adding Weavy to HubSpot CMS using Design Tools.

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

Have HubSpot CMS 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 CLI?

1. Create private app

To get the details of the current contact on your site through the HubSpot API, we need a private app and an access token; 

  • 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

Now, we need a serverless function that will;

  • Get the contact details of your current contact
  • Sync that contact with Weavy
  • Issue an access token from Weavy

Why a serverless function? To securely sync contact details and issue access tokens, we need that communication to happen server-to-server. 

Follow these steps;

  • Go to Marketing > Files and Templates > Design Tools
  • Go to the folder in your project where you want to create your serverless function.
  • Click File and choose New Function
  • Name folder to wy-auth
  • Name JavaScript file to wy-auth
  • Set the endpoint path to get-access-token
  • Set HTTP method to GET and click Create
  • 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

  • Choose what folder you want to create the module in.
  • Create a New file and choose Module as type.
  • Check Site Pages to where this module can be used.
  • Name the module weavy-block and set the label to Weavy Building Block when it is cerated so it's easy to find later.

5. Add fields

  • Add a field with type Choice
  • Name it Building Block
    • HubL variable name should be building_block
  • Display as Radio
  • Choices;
    • Chat: wy-chat
    • Feeds: wy-posts
    • Files: wy-files
  • Set default value to Chat

6. Modify module.html (HTML + HubL)

Modify module.html - 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 and the content ID - making it unique so you can render multiple building blocks on the same page.

7. Take it for a test run

Navigate to Marketing > Website > Website Pages  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.

See the Demo User? This means that there's no cookied contact set - try use or form or SSO. 

Don't see anything? Make sure that API, URLs, and access token are correctly set in all code files.

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