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.

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.