✅ Create the project: Check
✅ Create the different screens and list them: Check
Now it's time to get busy with the widget design!
Push the customization door, enter the cookie beauty spa and make your widget as beautiful as your site 💋💄
To access the graphic customization settings of the widget, 2 solutions:
👉 via the cogwheel ⚙️, then on the menu "Colors and Styleguide"
👉 via the tab "Customize the widget look"
1. WIDGET POSITION & OVERLAY
The first section of the widget customization interface is the Button Style section.
Under this section, you have different settings allowing you to manage :
|
The position of the widget on your site and the button |
|
|
The scroll of your web page on mobile device |
|
|
To know more about it, it's 👉 here 👈 |
2. COLORS 🦄, GRAPHIC CHART 🎨, FONT 👮
The second section of your widget settings interface is the Colors section.
Under this section, you can manage the whole color design of your widget according to 4 defined types: paint spot, base color, buttons and overlay.
As a reminder, the overlay is the shadow behind the consent wall 😉.
The various other sections allow you to change the color of each element by clicking on the small square in front of it.
Thanks to the color charts, you can choose precisely the color you want for each represented element.
💡 Remember to validate the color chart when you change the color of the chosen element!
It's magic 🪄 you can view your changes in real time thanks to the representation of your Axeptio widget on the left side of the settings interface :
https://www.loom.com/share/9b9fb9124d464f9aa1d6afffa64356fa
3. WIDGET BORDERS, FONT SIZE, BOX SHADOW
The third section for customizing your widget is the Widget Style section.
Its different sections allow you to change the borders of the widget, its buttons and to set the font size.
Bonus! This is also where you can play with the box shadow of your widget 👻
Give free run to your desires!
Focus on box shadow:
The box shadow is the one behind your cookie widget when it is displayed.
You can choose to keep the default one or not to use it at all:
Or even better! You can choose to customize it! That is, you can define its size and color yourself 🎨
To do this, simply select "CSS Custom Shadow" and fill in the CSS box that appears.
The size of the shadow is defined in pixels and the color is managed between the rgba brackets.
4. CHOOSING THE TYPOGRAPHY
The fourth, and final section (yikes 😰) of your widget customization interface is the Typography section.
It allows you to select the typography of your choice! And yes, that's all!
If you don't want to bother with these details, leave it to us, we'll take care of everything 💆
All you have to do is check the boxes "Load font" and we'll take care of identifying the font already on your site and put it on your widget (provided it's royalty free of course 😉 ).
And that's it! 🎉 Now you know everything to make your widget the most beautiful!
All that's left is to publish it 💪 But before that, come and have a quick look, at the other features of your back office 👉 🎁