QUICKSTART

Add Weavy to your site using HubSpot CMS CLI

This quickstart tutorial will show how to use our UIKit Web and add our building blocks as modules to your site using HubSpot CMS CLI.

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 Designer Tools?

1. Create a module

Open up your project in VS Code or similar, start a Terminal, and go to your modules folder to create a new module.

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

2. Modify meta.json

Modify meta.json in the modules folder - replace with this code 
{
  "label": "Weavy",
  "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
}

3. Modify fields.json

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

4. Modify module.html

Modify module.html in the modules folder - replace with this code 
{% require_js position="head"  %}
<script src="WEAVY_SCRIPT"></script>    
<script>
    const weavy = new Weavy();
    weavy.url = "WEAVY_URL";
    weavy.tokenFactory = async () => "USER_TOKEN";
</script>
{% end_require_js %}

{% 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 %}
    <{{ module.building_block }} uid="uid-{{ name }}-{{ content_id }}"></{{ module.building_block }}>
{% endif %}
  • Line 2 - loading our UIKit via CDN
  • Line 5 - set the URL to our Weavy backend; in this case WEAVY_URL. You can find this URL in your environment on your Weavy Account.
  • Line 6 - pre-generated access token for a user, strictly for demo purposes.
  • Line 15 - render the Weavy building block based on what choice is made in the page editor.

6. Take it for a test run

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

Search for the Weavy 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.

On this page
Unlock the tutorial with your Weavy API key.
hubspot-samples2
Next

What's next?

This quickstart focused on the front end only, with a pre-generated access token impersonating a demo user.

The next step is to fetch the logged-in user HubSpot, sync it with Weavy, and generate an access token so all of your users can start using our building blocks contextually.

Let's do it

There's more

Check out the other tutorials to see how it's done in Design tools, and more

All tutorials
Ask WeavyBETA

Get answers faster with a direct channel to our developer success team or by asking our generative AI.

Sign up to unlock or Sign in Learn more about how it works

Want to do it the traditional way? Then fill out the form 😉.

Ask WeavyBETA