Adding HubSpot tokens for images, videos, maps, and buttons

As you use our HubSpot integration, you might have a need to pull in unique images and other visuals to personalize your Qwilr Pages. You can set up tokens for these!

What kinds of visuals can you work with?

Qwilr supports these kinds of visual tokens:

Images (you'll need to have them hosted online)
Videos (hosted on one of our supported services)
Google Maps (you'll need the embed code for your map)
You can also attach a token to Qwilr's clickable button, so it can link to different destinations in different pages.

You can use any or all of these in a Qwilr template, alongside your regular HubSpot tokens.

Note: Wherever you host your visuals, they need to be set as publicly available. Private content won't work with tokens. Images hosted on Google Drive are not currently supported.

Creating custom fields for visuals

In your HubSpot account, you'll need to set up one or more custom fields for each type of visual you'd like to use. These fields should be "multi-line text" fields.

Each new custom field will generate a new token in your Qwilr token list.

As you work with client records in HubSpot, you'll paste the URLs for your hosted visuals into the custom fields. Here's an example from a HubSpot record.

Adding an image placeholder to the Qwilr template

Next, you'll need to set up the spaces in your Qwilr template where these visuals will go. You'll add placeholders, and then attach the new tokens to them.

As an example, let's say that you want to include a product image in each Qwilr Page. You have a total of 5 images, which are all hosted online. You have a unique URL for each one. You need to have different clients see different images in their Qwilr Pages. So we'll add an image placeholder to our template.

Step 1. Open your template for editing. To add an image placeholder, click on the + symbol that appears on any blank line. Then choose Image from the menu.

This adds a new image placeholder to the template. You can drag its corners to resize it as needed.

Step 2. Click on the top edge of the placeholder to bring up its toolbar. Click the Add Token icon. That will bring up a list of your HubSpot tokens. Locate the custom field's token and click on it.

That's it! Your image placeholder is all set. When you create a new page from this template, it will pull in the image URL from your HubSpot record and display it in the page.

For video, maps, and buttons

The process is the same for the other kinds of content: add the placeholder to your template, and then attach a token to it.

All of the placeholders begin by clicking on the + symbol on any blank line, and then choosing the type of content you need from the menu.

Removing a token from a placeholder

You can remove the token from any placeholder in your template. To do this, open your template for editing in Qwilr.

Locate the placeholder and click along its top edge. Click the Edit Token icon, and then click the icon to remove the token.

After you remove the token, you can add a different token, or add a visual to the placeholder manually, or delete the placeholder.

Did this answer your question? Got Feedback? Let us know by emailing help@qwilr.com!!