Add (custom) JS modal/banner to website

G. Dugan asked on January 8, 2020 19:32

I want to add a CUSTOM modal/banner to our Kentico site.

I believe it is currently running Kentico 10 (upgrading to v12 soon I was told)

This is for a cookie notice banner/modal.. (we do not want to use any of the built on Cookie Law/Simple Cookie Law approaches)

There are several parts to this.. and I'm not sure where they all go.. and how to link them together.

1.) The actual .js script/code. - I have added that as 'cookie_notice.js to the javascript section, and is has path of:

~/CMSScripts/Custom/cookie_notice.js

https://www.somedomain.org/CMSScripts/Custom/cookie_notice.js

2.) The .css that styles the cookie notice banner (and places it at the bottom/above the footer on a higher z-index)

3.) The actual 'mark-up (HTML) content (not sure where this needs to be added/created? nor how to link/add it to the site so that it shows on the site when a user loads the URL)

  • Not very experienced with Kentico, so please do not respond with things like: just make a 'xxx'.. because knowing HOW/WHERE to get to these sections is -not- something are familiar with. How/Where to find these sections is appreciated.

This is NOT page specific so.. this is globally/site wide. Doesnt matter what page the user 'ends up on'.. if they have NOT seen/accepted the cookie notice.. it should be displayed for them.

I dont know (or if its best practice) to try and add this to the header? or some template? I caution using a template approach as there may be many different templates used through the site? for different sections/areas? and I'd hate to miss an area if going the template route?

How can we do the above?

Thanks!

Recent Answers


G. Dugan answered on January 8, 2020 21:36 (last edited on January 8, 2020 21:37)

For anyone else looking for simple directions on how to achieve the same..

these are the steps I took:

Adding JS to Kentico:

  • Log into Kentico site
  • Navigate to Application List (little pinwheel/star icon next to home icon at top)
  • Search for: javascript
  • Click 'Create" button
  • Paste your JS code in the new window (do not post script tags)
  • Make note of path to asset -

Uploading CSS stylesheet to server

  • Log in and upload your CSS file to desired directory
  • Make note of path to asset

Adding/importing assets to Master Page

  • Log into Kentico site
  • Click HOME button at top
  • Click on Pages icon/section
  • Click on Master Page at top of page
  • In the -head- section find the customizable/editable section and import your .js and .css files

Adding HTML/markup to Master Page

  • Log into Kentico site
  • Click HOME button at top
  • Click on Pages icon/section
  • Click on Master Page at top of page
  • Right after the -body- tag opening, you should see an editable field to paste your markup in to.
  • Paste markup and save
0 votesVote for this answer Mark as a Correct answer

   Please, sign in to be able to submit a new answer.