Start with creating your custom cookie banner. This new tool of CookieFirst will let you create your own banner. When going to http://studio.cookiefirst.com you can start directly with designing. Pay attention this custom cookie banner will only work for paid plans!
When visiting the site for the first time you will get a boilerplate to start designing from. New elements can be dragged into the boilerplate from the left side. Existing elements can be edited by selecting them in the boilerplate and editing them on the right side. This is a so-called WYSIWYG, “What you see is what you get” generator. So the boilerplate in the middle will be shown on your website when downloaded and added to your site.
Some more information about the studio itself can be found here.
Some more information about all the elements and their attributes can be found here.
Some more information about the installation can be found here.
Read these tips and tricks before starting to create your custom banner.
- Wrap everything in a container. The container is the building block of this editor. With the container you can easily decide the sizes and the alignment of the elements. You can also choose to place the elements inside the container next to each other or below each other.
- When hovering an element a blue menu will appear above the element. When pressing the first icon you can move the element to other places. The second icon, the arrow up, will select the parent element for you. The third copy icon will copy the element with all its descendants and add the copy in the parent element. The last icon, the trash can, will delete the element and all its descendants.
- If you want to edit parts of a text do this after downloading the code in your code editor. (for now) It is not possible to add links or effects to separate words.
- Do not forget to bind a toggle group to a toggle. When changing the text this will not automatically happen. You need to select this toggle group in the customize on the right side.
- Do not forget to add an action to a button. This can also be changed in the customize on the right side. These actions will decide what is going to happen when the user clicks a button.
- When finished editing or when done for the day, always download the project. This project will contain a file “key.txt” this key can be used to regenerate your custom banner. You can continue developing on other devices as well. Regenerate your custom banner by clicking the “Upload” button in the header and paste the key in the text field.
- When wanting to view how the banner looks without an element you can click on the eye icon before the layer on the bottom right side. This will show you the banner when the element is not visible. Pay attention, this will not delete the element! So it will still be visible in the end product.
Good luck with creating your custom banner! If you have any issues please contact support.
