You can add, edit, reposition, or remove a logo in the consent popup to match your branding. In this article, we’ll show you how to do it.
Before you start
Here are a few things to know before you start:
The following guide is for Overlay v2 and Overlay v3 templates, version 1.1.0 or higher.
To add your logo to Overlay and Overlay v2 templates, you need to have a URL where your logo is hosted, such as:
The logo has to be a URL to a .png or .svg file, it shouldn’t be a .jpeg file.
The default placement of a logo is in the bottom left-hand corner of the popup.
Add a logo
To add a logo to Overlay and Overlay v2 templates, follow these steps:
1. In Consent Solutions, find the consent solution you want to customize the popup.
2. Go to Pop-up appearance and select Overlay 2 template.
3. Go to Advanced options and expand the options.
4. In JavaScript, replace the URL path with the one for your logo in the imagePath variable.
5. (Optional) Adjust the image width by setting the value in pixels (px) in the logo.style.width variable.
5. Click Save and publish.
6. Done.
Reposition a logo
To adjust the logo's position on the consent banner, follow these steps:
1. In Consent Solutions, find the consent solution you want to customize the popup.
2. Go to Pop-up appearance and select Overlay 2 template.
3. Go to Advanced options and expand the options.
4. In JavaScript replace the 'coi-banner__footer' with 'coi-banner__text', to move the logo to the top of the popup.
5. Click Save and publish.
6. Done.
Remove a logo
To remove a logo from the consent popup, follow these steps:
1. In Consent Solutions, find the consent solution you want to customize the popup.
2. Go to Pop-up appearance and select Overlay 2 template.
3. Go to Advanced options and expand the options.
4. In JavaScript, remove the URL path to your logo from the imagePath variable.
5. Click Save and publish.
6. Done.
Quick guide: Watch this short video for a step-by-step walkthrough of editing the logo in the consent popup: