Creating Qwilr tokens for images, videos, maps, and buttons
Tokens make it easy to personalize pages with your client's name and other text-based details. But what if you need to pull specific images (or videos) into a page based on the client? Or what if you need to have a clickable button that links different clients to different web pages? Our Tokens tool can do that as well.
In this article:
Getting Started
This article covers using tokens for visuals in Qwilr-based templates. If you're using our HubSpot or Salesforce integrations, please see the article on CRM templates instead.
You'll need to have your template already converted before starting these steps.
Creating image tokens
Let's say you have a spot in your Qwilr Page where an image will go. But you need to use different images for different clients. You can set up an image placeholder in your template, and attach a token to it.
Note: You'll need to have your images hosted somewhere online, so that you can get a URL address for each image. Each image also needs to be publicly available - private content won't work with Tokens.
For this example, let's say that we always need an image of some athletic shoes to appear in our Qwilr Page, but we need to use different images depending on the client. We have 3 images hosted online, and a URL for each one.
Step 1. First, you'll open your template for editing, and then set up an account token for the image. Your image tokens and text-based tokens will live in the same list.
It can be helpful to specify in the token name that it's an image.
Step 2. Now, you'll add an image placeholder to your template. To do this, click on the + symbol on any blank line. Choose Image from the menu that appears.
An image placeholder will appear. You can drag its corners to resize it as needed. A toolbar also appears at the top of the placeholder, where you'll access your account tokens list.
Step 3. To add the image token to this placeholder, head to the toolbar and click the Add Token icon. A list of your current account tokens will pop up so you can choose the correct one for this image.
Note: You can do this process anywhere in your page you'd use an image. You can put a placeholder and token in a 2-column widget, for example, or an accordion section.
Step 4. Your image token is all set! Now when you create a new page from this template, you'll be prompted to add the URL for the image you want to use in this page.
And that's it - you've just customized the image in this new page. The next page you create from this template, you can paste in a different image URL.
Creating video tokens
Video tokens work similarly to image tokens. You'll add a placeholder to your page and then connect a token.
For this example, let's say that we always want to add an intro video to our Qwilr Page, but we want it to be a different video for each client.
Note: You'll need to have your videos hosted online, so you can get the URL for each one. Qwilr supports videos hosted on several services, and you can learn more about that here. Your video must be publicly viewable - private videos won't work with Tokens.
Step 1. Open your template for editing. Set up an account token for your video. As with an image token, it can be helpful to specify in the token's name that it's a video.
Step 2. Next, add a video placeholder to your template. To do this, click on the + symbol on any blank line. Choose Video from the menu that appears.
A video placeholder will appear. You can drag its corners to resize it if needed. A toolbar also appears at the top of the placeholder. That's where you'll access your account tokens list.
Note: Qwilr also has a Video Block, but it doesn't currently support Tokens. Instead, use an inline video as shown above.
Step 3. To add the video token to this placeholder, head to the toolbar and click the Add Token icon. A list of your current account tokens will pop up so you can choose the correct one for this video.
Step 4. Your video token is all set! Now when you create a new page from this template, you'll be prompted to add the URL for the video you want to use in this page.
Creating Google Map tokens
You can also set up a token to display Google Maps. Let's say you have multiple office locations and you want to place different maps in different clients' Qwilr Pages.
Step 1. Head to Google Maps and get the embed code for the map you want to use.
Step 2. Back in Qwilr, open your template for editing. Set up an account token for your map. It can be helpful to specify in the token's name that it's a map.
Step 3. Next, open your template for editing and add a map placeholder. To do this, click on the + symbol on any blank line. Choose Google Maps from the menu that appears.
The map placeholder has a toolbar at the top, and this is where you'll access your account tokens.
Step 4. To add the map token to this placeholder, head to the toolbar. Click the Add Token icon. A list of your current account tokens will pop up so you can choose the correct one for this map.
Step 5. Your map token is all set! Now when you create a new page from this template, you'll be prompted to add the embed code for the Google Map you want to use in this page.
Creating button tokens
Qwilr has a clickable button you can add to any template. If you need to have that button link to different destinations for different clients, you can add a token to it.
In this example, we're adding a "Contact Us" button to our template. But we'll want this to link to different contact form pages on our website, depending on the client.
Step 1. Open your template for editing. Set up an account token for your button. It's helpful to make this specific in the token name.
Step 2. Add a new button to your template. To do this, click on the + symbol on any blank line. Choose Button from the menu that appears.
Step 3. Click on the button to add text.
Step 4. Click on the top edge of the button to bring up a toolbar. Click on the Link icon.
From there, click on the Add Token icon. That will bring up a list of all your account tokens, so you can choose the one for this button.
If you want to verify the token at any time, click the top edge of the button. The Link icon will be blue to indicate there's an assigned token. Click on it to see which one is added.
Step 5. Your button token is ready! Now when you create a new page from this template, you'll be prompted to add the URL you want the button linked to.
Removing a token from a placeholder
Anytime you've assigned a token to one of your visual placeholders, you can unassign it.
Click along the top edge of any placeholder to bring up the toolbar. Click the icon to remove the token.
From here, you can click the Add Token icon again to assign a different token. Or, if you'd rather add the content directly to your template without a token, click on the placeholder itself to do that.
What if I forget to add a URL to the token?
Whenever you create a new page from your template, you'll see a form where you'll add all the URLs for the tokens. That causes the content to be added to your new page.
But what if you don't have all the details handy in that moment? What if you need to leave some fields blank?
In this case, the empty placeholder will appear in the new page. You can click on the top edge of the placeholder to either add the content manually, or delete the placeholder.
