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

HubSpot

Tutorial

Add a Copilot to your HubSpot CMS site

In this tutorial, we'll create a module that you can drag and drop into any page in your HubSpot CMS to add a Copilot that is contextually aware and sees what the user sees.

1. Create a module

We need to create a module that we can drag and drop into a HubSpot CMS page;
Create a new module in your modules folder;
Run in the terminal 
hs create module copilot
  • What should the module label be: Copilot
  • Is this a React module: N
  • What types of content will this module be used in: PAGE
  • Is this a global module? N

2. Add fields

Let's add some fields to the module, so the editor can themselves name it, set a description and add suggestions.
Copy and paste into fields.json 
[ {
  "name" : "agent_uid",
  "label" : "Agent UID",
  "required" : false,
  "locked" : false,
  "validation_regex" : "",
  "allow_new_line" : false,
  "show_emoji_picker" : false,
  "type" : "text",
  "display_width" : null,
  "default" : "assistant"
}, {
  "name" : "copilot_name",
  "label" : "Name",
  "required" : false,
  "locked" : false,
  "validation_regex" : "",
  "allow_new_line" : false,
  "show_emoji_picker" : false,
  "type" : "text",
  "display_width" : null,
  "default" : "Copilot"
}, {
  "name" : "copilot_description",
  "label" : "Description",
  "required" : false,
  "locked" : false,
  "validation_regex" : "",
  "allow_new_line" : false,
  "show_emoji_picker" : false,
  "type" : "text",
  "display_width" : null,
  "default" : "This copilot lets you ask questions on the page you're on."
}, {
  "name" : "copilot_suggestions",
  "label" : "Suggestions",
  "required" : false,
  "locked" : false,
  "occurrence" : {
    "min" : null,
    "max" : null,
    "sorting_label_field" : null,
    "default" : null
  },
  "children" : [ {
    "name" : "suggestion",
    "label" : "Suggestion",
    "required" : false,
    "locked" : false,
    "validation_regex" : "",
    "allow_new_line" : false,
    "show_emoji_picker" : false,
    "type" : "text",
    "display_width" : null
  } ],
  "tab" : "CONTENT",
  "expanded" : false,
  "group_occurrence_meta" : null,
  "type" : "group",
  "display_width" : null,
  "default" : [ ]
} ]

3. Update the CSS

There's some simple styling added to the Copilot, so let's add that to the CSS file for the module
Copy and paste into module.css 
#wyCopilot button {
    background-color: #f0f0f0;
    border: none;
    border-radius: 10px;
    padding: 10px;
    cursor: pointer;    
}

#wyCopilot .suggestion {
    border: 1px solid #f0f0f0;
    border-radius: 10px;
    padding: 10px;
    cursor: pointer;
    margin-bottom: 5px;
}

#wyCopilot .suggestion:hover {
    background-color: #f0f0f0;
}

4. Add data and instructions

Through JS we'll add instructions and the data we want the Copilot to act on.
Copy and paste into module.js 
document.addEventListener('DOMContentLoaded', function() {
    const content = document.querySelector("body");
    
    // Clone the content to avoid modifying the original
    const contentClone = content.cloneNode(true);

    // Remove elements you want to exclude
    const elementsToExclude = contentClone.querySelectorAll('#wyCopilot');
    elementsToExclude.forEach(element => element.remove());
    wyCopilot.instructions = "Summarize the following content into 2-3 detailed, well-written paragraphs - max 30 words per paragraph. Focus on distilling the main arguments, themes, or takeaways, while omitting minor details or repetitive information. Present the summary using Markdown with appropriate headings, bold key points, and maintain a clear, readable flow for someone unfamiliar with the original content. Do NOT list items; instead, provide a cohesive narrative that captures the essence of the material.";
    wyCopilot.data = [contentClone.innerHTML];

});

5. Render the Copilot

It's time to create the HTML for the Copilot and render it in the module.
Copy and paste into module.html 
{% if is_in_editor %}
    <div style="background:#f5f8fa;border:1px dashed #aaa;text-align:center;padding:70px 0;color:#444">
    HubSpot Editor Placeholder<br>for <strong>Weavy Copilot</strong>
    </div>
{% else %}
    <wy-copilot id="wyCopilot" bot="{{ module.agent_uid }}">
        <button slot="actions" onclick="document.querySelector('#wyCopilot').reset()">New chat</button>
        <div slot="header">
            <h3>{{ module.copilot_name }}</h3>
            <p>{{ module.copilot_description }}</p>
            {% if module.copilot_suggestions %}
                <div slot="suggestion-list">
                    {% for suggestions in module.copilot_suggestions %}
                        <div class="suggestion">{{ suggestions.suggestion }}</div>
                    {% endfor %}
                </div>
            {% endif %}
        </div>
    </wy-copilot>
{% endif %}

6. Done!

You now have a Copilot module that you can drag and drop into any page on your site - and it will automatically get the content from the page and answer the questions from the user.
copilot-hubspot
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