<iframe src="https://www.googletagmanager.com/ns.html?id=GTM-PP7S83N" height="0" width="0" style="display:none;visibility:hidden">

HubSpot

Guide

Install Weavy to your HubSpot CMS account using CLI

In this guide, we'll be creating the necessary pieces to start creating modules in HubSpot CMS using our power components.

1. Weavy API key and backend

First, we need an API key to communicate with the Weavy backend.

2. Create a serverless function

We need to have a serverless function where we can call the Weavy API to create users and issue access tokens.
Create or select the folder in which you want to create the function.
Run in terminal 
hs create function weavy

Use these values for the input to create the function.

  • Name of the folder where your function will be created: weavy
  • Name of the JavaScript file for your function: get-access-token
  • Select the HTTP method for the endpoint: POST
  • Path portion of the URL created for the function: weavy/accesstoken

3. Get access token

In the file now created using the HS CLI command,  let's add this script.
Copy and paste into get-access-token.js 
const axios = require('axios');

const weavyURL = 'WY_BACKEND_URL';
const weavyAPI = 'WY_API_*****************';

exports.main = async ({ body }, sendResponse) => {
  const { uid, name, email, imageUrl } = body;

  try {
    // Create or update user in Weavy
    const createUserResponse = await axios.put(
      `${weavyURL}/api/users/${uid}`,
      {
        name: name,
        email: email,
        picture: imageUrl
      },
      {
        headers: {
          'Authorization': `Bearer ${weavyAPI}`,
          'Content-Type': 'application/json'
        }
      }
    );

    // Generate access token
    const tokenResponse = await axios.post(
      `${weavyURL}/api/users/${uid}/tokens`,
      {},
      {
        headers: {
          'Authorization': `Bearer ${weavyAPI}`,
          'Content-Type': 'application/json'
        }
      }
    );

    // Return the token 
    sendResponse({
      body: tokenResponse.data,
      statusCode: 200
    });

  } catch (error) {
    console.error('Error in Weavy authentication:', error.response?.data || error.message);
    sendResponse({
      body: { 
        error: 'Failed to authenticate with Weavy',
        details: error.response?.data || error.message
      },
      statusCode: error.response?.status || 500
    });
  }
};

4. Add Weavy UIKit

In the <head> of your template, we need to reference the Weavy UIKit.

Add to <head> 
<script src="WY_BACKEND_URL/uikit-web/weavy.js"></script>

5. Init Weavy

After the Weavy UIKit has been loaded, we need a JS snippet that initializes Weavy and gets the user's access token; either place it in your template or in a separate JS file.
Init Weavy 
// The payload should be dynamically populated by the current logged-in user or contact in HubSpot, etc.

const loggedInUser = {
    name: 'Fullname',
    email: 'name@email.com',
    imageUrl: 'https://##########',
    uid : 'A unique user identifier (cannot contain whitespace and must contain at least one non-digit)',
};

async function getAccessToken() {
    const response = await fetch('/_hcms/api/weavy/accesstoken', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json'
        },
        body: JSON.stringify(loggedInUser)
    });

    const data = await response.json();
    
    if (response.ok) {
        return data.access_token;
    } else {
        console.error('Failed to get Weavy token:', data.error);
    }
}

document.addEventListener('DOMContentLoaded', function() {
    weavy = new Weavy();
    weavy.url = "WY_BACKEND_URL";
    weavy.tokenFactory = async (refresh) => getAccessToken();
});
Read more about the Weavy API endpoint for users to understand more about uid, etc.

6. Done!

With this in place, we can start adding our power components - copilot, chat, messenger, and more.
On this page
Support

To access live chat with our developer success team you need a Weavy account.

Sign in or create a Weavy account