Skip to main content

How to expand the mobile view for Overlay v3 templates

Learn how to expand the mobile view for Overlay v3 templates.

Updated over 2 months ago

Overlay v3 templates (v1.1.0) include a new minimized mobile view, enabled by default.

Users can expand it by clicking the arrow at the top. To show the expanded view by default, make the following chanes. In this article, we’ll show you how to do it.

Before you start

Here are a few things to know before you start:

  • If you're using an Overlay v3 template version older than 1.1.0, update it to ensure everything works correctly.

Show the expanded view by default in Overlay v3 templates

To show the expanded view by default in Overlay v3, follow these steps:

1. Log in to Cookie Information.

2. In Consent solutions, find the consent solution you want to adjust the consent popup.

Find your consent solution in Cookie Information

3. Go to Consent popup > My templates.

Find your templates in Cookie Information

4. Find the Overlay v3 template.

5. Click the three-dot icon next on the Overlay v3 template, then click Edit.

Edit the Overlay v3 template

6. In Template code, go to HTML.

7. In HTML, find following code snippet:

<div role="dialog" tabindex="-1" aria-modal="true" id="coi-banner-wrapper" class="coi-banner__wrapper" aria-describedby="coiBannerHeadline" aria-labelledby="coi-banner-wrapper_label" lang="{{language}}" dir="ltr">

8. Replace the code you've found with the following:

<div role="dialog" tabindex="-1" aria-modal="true" id="coi-banner-wrapper" class="coi-banner__wrapper coi_expanded" aria-describedby="coiBannerHeadline" aria-labelledby="coi-banner-wrapper_label" lang="{{language}}" dir="ltr">

9. Done.

Related articles:

Did this answer your question?