How to set up your custom cookie banner from CookieFirst

Have more questions? Submit a request

In this zip file you will find 5 files. Check if the following files are present:

  • app.js
  • banner.html
  • key.txt
  • readme.txt
  • style.css

If one of the files is missing please download your custom banner again.

If everything is present you can follow the next steps to install your custom banner.

Step 1:

Add the app.js to your javascript directory or to another directory where you think it fits best.If needed you can change the name of this file. Remember the file path because it is needed later.

Step 2:

Add the style.css to your stylesheet directory or to another directory where you think it fits best. If needed you can change the name of this file. Remember the file path because it is needed later.

Step 3:

Open banner.html in your (code) editor.

Step 4:

On line 3 you will find the script tag to include the CookieFirst API. Change the data-cookiefirst-key attribute from XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX to your CookieFirst key. You can find your CookieFirst key in your account on the website. In the menu select "domains" and click on the settings button for the domain you want to install the custom banner for. Go to "Your embed script" in the menu on the left side. The first grey area is the CookieFirst key.

Step 5:

On line 4 you will find the script tag to include the downloaded javascript file. Change the src attribute to the current file path. If you have changed the file name, also change the file name .

Step 6:

On line 5 you will find the link tag to include the downloaded css file. Change the href attribute to the current file path of the css file. If you have changed the file name, also change the file name.

Step 7:

Copy these three lines (line 3, 4 and 5) and add them to the head (between <head> and </head>) of your website.

Step 8:

Copy the rest of the file (from line 7 until the end) and add this to the body (between <body> and </body>) of your website. It is common to add it to your footer.

Step 9:

Save everything and you are ready to go.

 

(key.txt is not needed for setup; this file includes a key so you can regenerate your custom banner at our customizer.)

Articles in this section

Was this article helpful?
0 out of 3 found this helpful
Share