At first it can be hard to understand the custom banner studio. Through this section we will explain how the custom banner studio works.
In the image above you can see the five (red circled) components the custom banner studio exists of.
The component with the number 1 is an example of the final result of the cookie banner. It shows at every moment how the banner will look when used on a site. You can drag elements into this area or select elements to edit their content.
The component with the number 2 is the left side bar. From this component you can drag elements into component 1 to add them to the banner. From up to down the elements you can drag in are a container, a text box, a button, an image and a toggle. With the drag and drop option you can choose where to place the elements in the banner.
Component 3 is the header of the studio. It contains some buttons. From left to right the first button with the text “New Project” will delete the current project and start a new project from scratch. The second button “Upload” will open a pop up screen to fill in a key. This key can be found in the downloaded zip file in the file “key.txt”. When the key is pasted in the text field the custom banner studiowill regenerate your banner. Then the two buttons in the middle are undo and redo buttons. The next button “Consent not given” will be explained in this help tutorial. Lastly, we have the “Finish Editing” button. This will show the current custom banner on full screen. It will also give you the option to download the project. The downloaded project will contain the css, html and javascript files to create the project on your website. More information on how to set up your custom cookie banner from CookieFirst can be found here.
Component 4, the top of the right side, shows the attributes of the selected element. When selecting an element in component 1 the attributes and their values will be shown here. These values of the attributes can also be edited to change the banner. See this page for all attributes that can be changed per element.
Component 5, the bottom of the right side, shows all the layers in the cookie banner. It is also possible to select an element from this view. Before the layer the eye icon shows if a layer is visible or hidden.
