Skip to main content
All CollectionsOnboarding.Online FAQDesign customizationFooter Cistomization
Web2App: Cookies policies management widget
Web2App: Cookies policies management widget
L
Written by Leanid Yuryeu
Updated over a week ago

In this article, we will guide you through the process of adding a footer with banner for Cookies management on your web onboarding screens.

1.Add the Web Footer

⚠️This footer kind is applicable :

  • for web onboarding only, The iOS SDK does not support it currently.

  • on all screens expect Custom screen and Paywall

1.1 Open the Correct Project - Ensure you are in the correct project where you intend to create Web onboarding.

1.2. Create or Open an Onboarding If you haven’t created an onboarding yet, do so. Otherwise, open the existing onboarding screen where you want to add the TC & PP links.

1.3. Select the Desired Screen - Add the screen (if it is not added already) and Click on the screen where you want to add the TC & PP label.

1.4. Edit the Screen - Click on the Pencil icon to open the edit screen.

1.5 Select Web Platform - On the Edit screen, choose the 'Web' option from the "Platforms" dropdown menu in the right sidebar.

1.6. Add the Web Footer - Locate the 'Web footer' section and click on the Add button.

Here you will see the Terms and Conditions and Cookie policies blocks on your screen.

In the other article, you can find how to customize the Terms and Conditions block.

Now, let's figure out how to customize the Cookie policy block

You can remove the Terms and Conditions block by clicking on Delete if it is not needed

And continue customizing Cookies only:

Here you can:

  • Edit the Widget text

  • Add or remove links,

  • Customize buttons (Accept, Decline, X)

  • Customitze the widget color

  • Manage the cookies and analytics sending based on user's choice

2. Customizing the Cookies Policies text on the widget

2.1 Edit the Widget Text

Simply enter or delete text in the text field. The changes will be displayed in the left panel in real-time. You can add text before, between, and after the links.

2.2 Text Design Customization Settings

Click on the settings icon next to the text field to open text customization options.

You can adjust: Font type, Font Size, Font Color, Font Weight, Font Height, text Background color, text Padding inside the widget

A full guide on text customization settings is available here.

2.3 Customize Links

Edit Link Text

Enter the desired text between tags to change the link text.

For example, adding 'Click Cookie Policies' between <CookiePolicies></CookiePolicies> tags will make the entire text a clickable link.

Customize Link Design

Click on the settings icon

Access the 'Labels' block.

Here, you can customize each link's text separately.

Enable the setting checkbox to adjust specific values.

If the checkbox is disabled, the text box settings will be applied to the entire text.

Edit Link Destinations

Click on the settings icon

to access the 'Links' block.

Here, you can insert any URL you want. Users will be redirected to the specified URL upon clicking the link.

Add New Link

Click on the settings icon.

In the 'Labels' section, click the Add button

Enter the label name, and click Add.

Customize the text design if necessary.

Add a URL link

In the 'Links' section, click Add

Enter the label name (same as the one added in the 'Labels' section) and the URL, then click Add.

The link is added:

Insert Tag in Text

Add the tag in the text using the template: <labelName>Link text</labelName>.

For example, <newLink>Onboarding Online</newLink>.

Remove Links or Labels

To remove links or labels, click on the Trash icon next to the item you want to delete.

Labels

Links

3.Buttons customization

Here you can manage 3 buttons on the banner: Accept, Decline and X button

3.1 Adding or removing buttons

You can enable or disable certain button by clicking on the checkbox near button.

Here are 3 examples with 3, 2 and 1 button enabled. But you can choose any setting you want:

All buttons enabled

Accept and Close buttons:

Only Close button:

3.2 Accept and Decline buttons text customization

You can enter any text in buttons by filling the text field:

Note - that functionality of accept and decline will be alway the same (you cancan change only title on the buttons).

3.3 Accept and Decline buttons design customization:

Click on the setting icon near button the you want to design.

Here you can customize:

Button Height Setting

  • Purpose: Modifies the button's height.

  • Usage: Activate this setting by checking the box in the "Button Height" row and specifying a value. Higher values create a thicker button, and lower values a thinner one.

Button Background Color

  • Purpose: Change the background color of the footer buttons.

  • Usage: Select a tint on the palette board or Apply the desired HEX color code

Button Border Width

  • Purpose: Adjust the thickness of the button border.

  • Usage: Change the value to increase or decrease border thickness. Ensure both the "Button border-width" and "Button border-color" checkboxes are checked for functionality. If the checkbox is disabled - the button border wont be applied.

Button Border-Color

  • Purpose: Change the color of the button border.

  • Usage: Select a tint on the palette board or Apply the desired HEX color code

Button Border-Radius

  • Purpose: Alters the curvature of the button's corners.

  • Usage: Increase the value for rounder corners and decrease for squarer corners. Adjust even if "Button Border Width" is disabled

Button Text Customization

The section includes full customization of the inside button such as font family, font size, line height, font weight, text color, text background color. Follow the detailed guide about text customization

Button Paddings

Adjust the 'button-box-paddings' to change the button's position.

3.4 Close button design customization

Click on the setting icon near button the Close button to expand settings.

Here you can change the icon color.

Select a tint on the palette board or insert the desired HEX color code

4. Widget customization

Click on setting icon near the 'Widget config' section. Here you will see a list of settings:

Here you can set the Widget design and behavior of cookies and analytics based on user choice(clicking 'accept' or 'decline').

4.1 Widget desing customization

Customize Widget background color.

  • Purpose: Change the color of the whole banner

  • Usage: Select a tint on the palette board or paste the desired HEX color code

Customize paddings inside the widget:

  • Purpose: Change the the distance between each widget border and the nearest element

  • Usage: Insert a number in pixels

4.2 Widget functionality customization

4.2.1 'Delete cookies after decline' option

This setting allows you to delete or save cookies that relate to your domain.

To manage it:

  1. Check or unckeck the checkbox near the 'Delete cookies after decline' option

  2. Save the changes on the screen by clicking on 'Save and Close' at the top right corner

  3. Update the Web onboarding!

If the Option is enabled

  • Once User has clicked 'Decline' on the onboarding's widget -> all cookies related to your domain will be removed from user's browser.

  • Once User has clicked 'Accept' on the onboarding's widget -> all cookies related to your domain will be saved and collected on user's browser

If the Option is disabled

  • All cookies related to your domain will be saved and collected on user's browser in both cases - if user has clicked 'accept' or 'decline'

4.2.2 'Should accept before analytics events' option

This option allows you to manage sending events to analytics before users choice on the banner.

To manage it:

  1. Connect needed analytics to the project

  2. Check or unckeck the checkbox near the 'Should accept before analytics events' option

  3. Save the changes on the screen by clicking on 'Save and Close' at the top right corner

  4. Update the Web onboarding!

Important:

Each analytics connected to sends

  • standart events (for instance, 'PageView', 'StartSession' etc) that are generated by analytics itself

  • user events that generated by our service (full description is here)

You can block sending user evens only or both - standart events and user events. The detailed guide about analytics connection is here:

  1. Amplitude analytics script adding

  2. GA4 script adding

  3. GTM script adding

  4. Yandex script adding

  5. Meta script adding

If the Option is enabled

  • Once User has launched the onboarding - all events before Widget appearing will be blocked

  • Once User has clicked 'Accept' on the onboarding's widget -> previous and next events will be sent

  • Once User has clicked 'Decline' on the onboarding's widget -> events will not sent to analytic

If the Option is disabled

All events will be sent independeltly banner appearing and user choice

4.2.3 'Always send events to custom analytic' option

Remember that you can connect your own analytic and this option helps to ignore user choise on the widged and always send events to your analytic.

If the Option is enabled

  • Once User has launched the onboarding - all events before Widget appearing will be sent

  • Once User has clicked 'Accept' on the onboarding's widget -> all events will be sent to your analytics

  • Once User has clicked 'Decline' on the onboarding's widget -> all events will be sent to your analytics

If the Option is disabled

  • Once User has launched the onboarding - all events before Widget appearing will be blocked

  • Once User has clicked 'Accept' on the onboarding's widget -> previous and next events will be sent

  • Once User has clicked 'Decline' on the onboarding's widget -> events will not sent to analytic

Remove Cookie Policies widget from the footer

  1. Select the Desired Screen - Click on the screen where you want to remove the Cookies Policies Widget.

  2. Edit the Screen - Click on the Pencil icon to open the edit screen.

  3. Select Web Platform - On the Edit screen, choose the 'Web' option from the "Platforms" dropdown menu in the right sidebar.

  4. Locate the 'Web footer' section and

    - click on the DELETE button below Web Footer. This will remove both - the Terms and Conditions and the Cookies Policies blocks from your screen.

    - Click on DELETE near the 'Terms of conditions footer'. This action will remove Terms and coditions only but will leave the Cookie policies banner

Did this answer your question?