How do I add the Termly consent banner to my Website Builder site?

With the Termly add-on, you can upgrade your consent banner to customise its settings and appearance, and access many other useful features that can help your website comply with privacy laws.

Below, we'll go through the steps of how to add the upgraded consent banner to your Website Builder site with the code component.

Would you like to watch a video instead?
We have a step-by-step video tutorial on how to use the Termly dashboard and add the consent banner to your Website Builder site: watch on YouTube.

• Before you start
• Step 1 - Disable the consent banner in Website Builder dashboard
• Step 2 - Log in to Termly dashboard
• Step 3 - Scan your website for cookies
• Step 4 - Customise your Consent Banner
• Step 5 - Copy the consent banner's HTML code
• Step 6 - Choose the code component in Website Builder
• Step 7 - Embed the consent banner code to your website
• Step 8 - Change the code component's settings
• Step 9 - Embed the preference center code to your website
• Step 10 - Adjust the placement and styling of your preference center link
• Step 11 - Save and publish your website

Before you start

In order to add the upgraded consent banner to your Website Builder site, you need a Termly subscription and access to Website Builder's code component. The code component is included in the Website Builder Premium and Business + E-commerce plans. 

Step 1 - Disable the consent banner in Website Builder dashboard

If you're already using Website Builder's basic consent banner (which is also provided by Termly), deactivate it before you embed the upgraded consent banner to your website.

1. Open your Website Builder dashboard from the one.com Control Panel.
2. Click on Website settings and select Consent banner in the left hand menu.
3. Make sure that the consent banner is not enabled - the toggle should show as grey. If the consent banner is active, deactivate it by clicking the toggle.
4. Publish your website.

Step 2 - Log in to Termly Dashboard

1. Log in to the one.com Control panel and click Termly under Advanced Settings.

   

2. Click the blue Go to Termly button. If you don't have a Termly subscription yet, you can purchase it on this page.

   

3. Enter your e-mail and Termly password, and click the Sign in button to log in to the Termly dashboard.

Step 3 - Scan your website for cookies

1. In the Termly dashboard, click Consent Management > Cookies in the left-hand menu.
2. Click Scan now.

Step 4 - Customise your Consent Banner

1. In the left-hand menu, click Consent management > Consent Banner. On this page, you can adjust your banner's settings and appearance.
2. When ready, click Save at the bottom of the page.

For more information about the customisation options, see our guide.

Step 5 - Copy the consent banner's HTML code

1. On the Consent Banner page, click Install button at the top.
2. In the pop-up window that opens, you can see the status of the cookie scan and the next steps for installing the banner. Click Embed under Step 2.
3. In the next window, click Plain HTML.
4. You can now see the script that should be added to Website Builder's code component. You can also choose if you want to activate the Auto Blocker feature. Copy the code by clicking Copy to clipboard.

Step 6 - Choose the code component in Website Builder

1. Go to your Website Builder editor.
2. In the menu on the left, click More and choose Code.

Step 7 - Embed the consent banner code to your website

1. In the pop-up window, choose Before closing </head> as the Placement of code.
2. Paste the consent banner script to the field and click Save.

Step 8 - Change the code component's settings

1. You can now see the code component at the top of your page in the editor. Click it to open its settings.
2. In the code component's settings, click Placement and tick the checkbox on Apply to all pages, so that the consent banner can be shown on all pages of your website.

Step 9 - Embed the preference center code to your website

In addition to the consent banner, we recommend adding a Preference center link to your website. By clicking it, your visitors can change their cookie preferences.

1. In the Website Builder editor, create another code component by clicking More and then Code in the left hand menu.

2. In the pop-up, choose Normal as the Placement of code.

3. Copy and paste the following code to the field, and click Save:

<a href="#" class="termly-display-preferences" style="color:#000000;">Consent Preferences</a>

Step 10 - Adjust the placement and styling of your preference center link

1. Drag the Preference center code component to where you want to place its link in your website. We recommend placing it in the footer, as it will then be visible on all pages.

2. You can change the appearance of the link by adjusting its code with CSS styles. Click the code component, select Edit code and add the CSS styles you want.
   In the example below, we've set the colour of the link as black and removed the underline:

<a href="#" class="termly-display-preferences" style="color:#000000; text-decoration: none;">Consent Preferences</a>

Step 11 - Save and publish your website

Save and publish your website to make the changes visible online.

To check that your consent banner is working, open your website in incognito mode. If you can't see the consent banner, try clearing your cookies and checking that you've completed all of the above steps.

Related articles:

• Getting started with Termly
• Do I need a consent banner on my website?