Front-end and Layout Tips of AdOp'st cookie banner on your website.

Adopt works to adapt its design as best as possible to your website.

The client chooses to select colors, behaviors and we pull the same font from the site for the banner. But, still some divergences may appear on your site.

Below are some tips on what we have worked on, and how we investigate these points.

CSS is a very flexible language; it is common for the appearance of the Banner to be overwritten by some rule of your site's theme. To avoid this we suggest some good practices:

• Avoid putting rules with !important in your css.
• Be careful about the scope of the rules. Whenever possible, scope the rules to a class or id. Especially for elements closer to the root of the body element.
• If you can, avoid ready-made themes.

• If more than one banner appears on top of each other, check if you haven't added the tag more than once (e.g. added it in the html code and also in GTM).
• If the style appears messy (either size, spacing, or fonts), look at the points above under Layout Problem:
• If your site design was done in house, contact the front-end designer or developer to request removal of rules that are interfering with the banner.
• If your site has a ready-made theme that allows customizations, ask a front-end developer to put in CSS statements that resolve the conflict in this area.
• Some e-commerce platforms may also have these situations, thes same points of review are for them as well.

If despite trying the tips above you have not been able to solve the problem, please contact our support team.

Some information that will help us detect the problem. If possible share it with us:

• Is your website using any CMS (e.g. Wordpress), are you using any commercial theme?
• Is your website hosted on a website builder platform (e.g.:wix, shopify)?
• Do you have access to make changes to the site's code? - Take a print screen of the screen of the eros (visual and inspector)
• If the banner does not even appear, press ctrl+shif+i on your site and copy the content that appears in the console.
• Do you have an approval/validation area on your site? If so, disable the banner on your main site and send us the link to the homologation area.