Wisepop Integration CSS?

Developer help Installation
1

Hello! Looking to work with Wisepop who say they are Ghost compatible. They sent me some code to include; the script (steps 1 and 2) is easy, but then there’s this:

  1. Add a bell (or any other CSS container) to your website.
<a tabindex="0" role="button" aria-label="Notifications" href="#" class="wisp"><svg fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" width="22" height="22" viewBox="0 0 24 24" stroke="black" xmlns=""><path d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9"></path></svg></a>
  1. Associate it with a wisp CSS class.

Admittedly I have no idea what I’m doing; I’m not a developer but have created a serviceable site using some tutorials and lots of searching (both the web and my soul). I’m just not even sure what either of these mean. Any help for a solopreneur just trying to get a site built would be helpful!

2

The thing you pasted in is not CSS. It’s html, and contains a link with an svg icon in it.

I think it would probably make sense to ask Wisepop for help. I’m /guessing/ this is meant to go into your navbar, but there’s not a way to paste html into the navbar without editing the theme. You could add it by editing the theme, or maybe by writing some javascript that adds it, but lacking any information about other steps in the document, that’s all I’ve got.

3

Thanks, below is the full set of steps. I am OK editing the theme. I already pasted the script in part 2 where they said to in the default.hbs, but I am not sure about the rest. It looks like it wants me to create a container to container for the HTML, but I am unclear about “bell” (although I guess it sounds like it’s a literal bell icon) and I don’t know what “wisp” means either.

Appreciate your help. I’m mostly ignorant yet capable, and also willing to ask Wisepop for help if needed.

STEPS:

  1. Find the layout / theme of burlington.buzz/. This is the HTML code common to all pages.

  2. Paste the setup code snippet right before the tag.

<script>(function(w,i,s,e){window[w]=window[w]||function(){(window[w].q=window[w].q||[]).push(arguments)};window[w].l=Date.now();s=document.createElement('script');e=document.getElementsByTagName('script')[0];s.defer=1;s.src=i;e.parentNode.insertBefore(s, e)})('wisepops', 'https://wisepops.net/loader.js?v=3&h=mmFKtcjtvf');</script>
  1. Add a bell (or any other CSS container) to your website.
<a tabindex="0" role="button" aria-label="Notifications" href="#" class="wisp"><svg fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" width="22" height="22" viewBox="0 0 24 24" stroke="black" xmlns=""><path d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9"></path></svg></a>

  1. Associate it with a wisp CSS class.

  2. Save and publish your changes.

4

You can add a bell icon to your site with the code in step 3. The bell will appear wherever you place the code.