Privacy Pop-up Message

Contents  >

HTML Project: 7

Introduction

In this task you will create a ‘pop-up᾿ privacy and cookie consent message to include in your web pages. The easiest way to do this is to use the privacy pop-up message creator from Insites.

You will then copy-and-paste your generated code into a template file named privacy-template.html. In future, whenever you need to include the privacy pop-up message in a web page, you can simply copy it from the template into your that web page.

Here is a sample privacy-template.html file. It only 'looks' blank. You can see the code if you view the page's source in your web browser.

Learning Goals

At the end of this Tutorial you will be able to:

Contents

Introduction

The templates folder

Generate the Privacy Pop-up Message

Create the template file

Upload your project to GitHub

The templates folder

Before continuing, ensure you have a sub-folder named templates in your main websites folder.

Project Privacy

You will use this folder as a place to store HTML, CSS and JavaScript snippets you can copy-and-paste into your web pages and stylesheets.

Generate the Privacy Pop-up Message

Follow these steps.

  1. Go to the Insites web page at this web address:   https://cookieconsent.insites.com/ Project Privacy Click the link named Download Open Source.
  2. Clicking this button does not actually download any files to your computer. It simply brings you to another web page named 'Download Cookie Consent'. See below. Project Privacy At the lower-right of this screen is a button named Start Coding. Click on it.
  3. You are now ready to work through the various Configure options displayed at the left of this screen. This will generate the pop-up message in the Copy the code section at the right of the screen. Project Privacy
  4. On the left of the screen, under the 1: Position heading, you can see that the Banner bottom option is selected by default, You need not change this. Project Privacy
  5. Next, click the 2: Layout heading to view your options. Accept the default layout of Block. Project Privacy
  6. Click the 3: Palette heading and accept the default first option. It shows a yellow button against a black background. Project Privacy 
  7. Click the 4: Learn more link heading and the then click the second option, named Link to your own policy. In the box displayed, enter a web address similar to the following, where username is the username you have chosen for your GitHub account:  https://username.github.io/privacy.html Project Privacy You will create the actual privacy.html web page in a later project.
  8. Click the 5: Compliance type heading and select the first option, Just tell users that we use cookies. Project Privacy
  9. Click the 6: Custom text heading to view the message that will be displayed to the website visitor. You need not change this. Project Privacy
  10. On the right side of the screen, you can see two blocks of code that have been created for your pop-up privacy message.
    • The first is the link to the CSS stylesheet file that controls the appearance of the pop-up message. Project Privacy
    • The second is the JavaScript code that creates the pop-up message. Project Privacy
    But before you copy these two items, you need to create a file to copy them to.

Leave the Insites cookie code generator screen open in your web browser.

Create the template file

Follow these steps to create a new, blank web page which will be your privacy template file.

  1. Open your Visual Studio text editor choose File | New File to create a new HTML file to store both the HTML and the JavaScript code for the privacy pop-up message. Project Privacy
  2. Choose File | Save As ... and save the file in your c:\\websites\templates folder with the name privacy-template.html Project Privacy
  3. Click anywhere in this new, empty file, hold down the SHIFT key, press the exclamation mark key ! and then press ENTER. Project Privacy Visual Studio adds some 'standard' HTML tags to your file as shown below. Project Privacy
  4. Change the text in the <title> tag from 'Document' to 'Privacy Template'. Project Privacy Also, between the closing </head> tag and the opening <body> tag, press ENTER a few times to add a few blank lines between them.   You are now ready to copy-and-paste to your file.
  5. In your web browser, return to the Insites cookie code generator screen.
    • Click the Copy HTML button, switch to Visual Studio, and paste the text just before the closing </head> tag of your privacy-template.html file as shown below.   To make your web page easier to read, press the ENTER key to add a blank line before and after the pasted text. Project Privacy
    • Next, return to the Insites cookie code generator screen.   Click the Copy code button, switch to Visual Studio, and paste the text just before the closing </body> tag at the end of your privacy-template.html file as shown below. Project Privacy
  6. In Visual Studio, save your privacy-template.html file.
  7. In your web browser, you can now close the Insites online cookie generator tab.

In your privacy-template.html file, you will find it helpful to add the following or similar comment line in the </head> section above the link to the CSS cookie stylesheet.


<-- Link to stylesheet for Cookie Consent Popup Message -->

Adding such a comment line will make the <head> sections of the web pages you create easier to read. See the example below.

Project Privacy Also, add the following comment line just above the JavaScript code near the bottom of the template web page. 

<-- JavaScript for Cookie Consent Popup Message -->

In future, whenever you need to add the privacy pop-up message to a web page, you can simply:

Upload your project to GitHub

The final step is to upload your project to GitHub.

The file for this project is in a sub-folder named websites/templates.

So you will need to upload this templates sub-folder to your account on GitHub.

  1. Open a new tab in your web browser and go to GitHub.com. If you are not already signed in to your GitHub account, sign in now. github-signin
  2. On your GitHub home page, click the name of the repository ('repo') that holds your web pages. Its name will look as follows, where username is your chosen username on GitHub.   username.github.io   github-repo
  3. The next GitHub screen displayed should look as follows. GitHub Upload
  4. Click the Upload files button. github-upload-portfolio
  5. In File/Windows Explorer on your computer, drag-and-drop the templates sub-folder to the GitHub tab in your web browser. github-upload-drag-drop
  6. After uploading the templates sub-folder, scroll down to the bottom of the GitHub screen, enter a short message in the Commit changes box, click the Commit changes button, and wait for the upload to complete. github-upload-progress

Your privacy template file is now published on GitHub at a web address similar to the following, where username is the username you have chosen for your GitHub account:

https://username.github.io/templates/privacy-template.html

It may take a few minutes for your uploaded files to appear on GitHub.



Return to Contents.