Element attributes

All elements have some attributes you can change to customize the design of the element. The attributes can be changed by selecting an element from the middle screen. The attributes can be changed on the right side.

Container

The container is the building block of the cookie banner customizer. A best practice is to add every element to a container. You can drag other elements in the container and build complex structures.

• Dimensions: Add a width and height to the container. Possible values are pixels (px), percentages (%) and auto. With auto the browser will calculate the value and it will mostly fit the elements in the container.
• Colors
  • Background: Changes the background color of the container. Color can be chosen in the color picker or a HEX, RGBA or HSLA value can be added.
  • Text: Changes the text color of the container. Color can be chosen in the color picker or a HEX, RGBA or HSLA value can be added.
• Margin: Add a margin to the top, bottom, right or left of the container in pixels.
• Padding: Add a padding to the top, bottom, right or left of the container in pixels.
• Decoration
  • Radius: Add a radius to the container in pixels.
  • Shadow: Add a shadow to the container in pixels.
• Alignment
  • Flex Direction: By default the flex direction will be a Column. This will place all elements added to the container below each other. The other option is Row, this will place all the elements in the container next to each other.
  • Fill space: By default this will be no. So the container will be the given width and height. When changing this to yes the container will wrap around its elements and change to the minimal width and height needed.
  • Align items: By default this is Flex start. Flex start will align all the elements inside the container to the left, Center will align all elements inside the container to the middle and Flex end will align all elements inside the container to the right.
  • Justify Content: By default this is Flex start. Flex start will start on the top with all elements, Center will align all elements inside the container to the middle of the height of the container and Flex end will align all elements tot the end of the container.
• Visibility: More information about visibility can be found here.

Text

The text element can ofcourse contain text. You can change the visible text by clicking on the text element and start editing the content.

• Typography
  • Font Size: the size of the font in pixels.
  • Align: By default the text will be aligned to the left. Other options are centered or right.
  • Weight: This changes the boldness of the text. From low to high: Regular (default), Medium, Bold.
• Margin: Add a margin to the top, bottom, right or left of the container in pixels.
• Appearance
  • Text: Changes the text color. Color can be chosen in the color picker or a HEX, RGBA or HSLA value can be added.
  • Shadow: Add a shadow to the text in pixels.
  • Visibility: More information about visibility can be found here.

Button

You can bind certain actions to a button to accept all cookies, deny all cookies etc. Also the text inside the button can be changed by clicking on the text.

• Colors
  • Background: Changes the background color of the button. Color can be chosen in the color picker or a HEX, RGBA or HSLA value can be added.
  • Text: Changes the text color of the button. Color can be chosen in the color picker or a HEX, RGBA or HSLA value can be added.
  • Background hover: Changes the background color of the button when the button is hovered. Color can be chosen in the color picker or a HEX, RGBA or HSLA value can be added.
• Margin: Add a margin to the top, bottom, right or left of the button in pixels.
• Padding: Add a padding to the top, bottom, right or left of the button in pixels.
• Decoration
  • Style: By default the style is full so the whole background of the color will be the color you gave it. When the style is outline only the border of the button will be shown in the chosen color.
  • border-radius: The radius in pixels of the button.
• Typography
  • Font Size: the size in pixels of the text in the button.
  • Align: By default the text will be aligned to the left of the button. Other options are centered or right.
  • Weight: This changes the boldness of the text inside the button. From low to high: Regular (default), Medium, Bold.
  • Action: You can add an action to a button with this option. The options are accept all cookies, save selection, adjust settings, deny all cookies and none. None will add no action to the button. The “accept all cookies” action will add the action to accept all cookies. The ”save selection” action will save the selected toggles. About the “adjust settings” action you can read more in this link here. The “Deny all cookies” action will deny all cookies except the necessary.
• Visibility: More information about visibility can be found here.

Image

An image to show on your custom cookie banner.

• Dimensions: Add a width and height to the image. Possible values are pixels (px), percentages (%) and auto. With auto the browser will calculate the value and it will mostly fit the elements in the container.
• Image
  • Image url: The link to the image
  • Image fit: By default fill. Fill will fill the dimension of the image and if necessary the image will be stretched or squashed to fit. The option “contain” will keep its aspect ratio and be resized to fit within the dimension.
• Visibility: More information about visibility can be found here.

Toggle

To the toggle a cookie categorie can be added so the users can toggle their cookie preference. Next to the toggle a text can be changed by clicking on the text.

• Colors
  • Text: Changes the text color of the toggle. Color can be chosen in the color picker or a HEX, RGBA or HSLA value can be added.
  • Toggle: Changes the color of the sphere when the toggle is selected. Color can be chosen in the color picker or a HEX, RGBA or HSLA value can be added.
  • ToggleBar: Changes the color of the bar when the toggle is selected. Color can be chosen in the color picker or a HEX, RGBA or HSLA value can be added.
• Margin: Add a margin in pixels to the top, bottom, right or left of the toggle.
• Typography
  • Side of the text: By default Right. The option Right will place the text to the right of the toggle. The other option left will place the text to the left of the toggle.
  • Font Size: the size in pixels of the text next to the toggle.
  • Align: By default the text will be aligned to the left side in the text field. Other options are centered or right.
  • Weight: This changes the boldness of the text next to the toggle. From low to high: Regular (default), Medium, Bold.
• Toggle group: To a toggle a toggle group can be added. These are the cookie categories. If the user clicks on a button with the “Save selection” action then the toggle groups of the selected toggles will be saved. Also when a user returns and will see the cookie banner again the corresponding toggles to his consent will be selected.
• Visibility: More information about visibility can be found here.