Display Your Signup Page as a Popup Widget on Your Website

When you create as Signup Page in Hive, we automatically give you two code snippets:

1. Regular Widget Embed Code. Embeds the signup page anywhere on your website.
2. Popup Widget Embed Code. Adds linked text at the top of your webpage that a visitor to your site can click to open the signup page.

There are a few ways you can use code in addition to the popup widget embed code to control how the popup behaves on your website. 

Open the popup when a user clicks a specific element on your webpage

This modifies the popup widget embed code so you can choose which element the popup widget is opened upon clicking (vs. just linked text at the top of your screen).

For example, if you have a button within the HTML of your webpage (e.g. <button>Click me to open popup</button>) and you want to open a signup widget popup when it's clicked, modify the HTML tag to look like the following: 

<button class="hive-modal-launcher" data-widget-type="signup" data-object-id="YOUR-SIGNUP-WIDGET-ID">Click me to open popup</button> 

(Above, you can see we add the hive-modal-launcher class and two new data attributes (data-widget-type  and data-object-id ). 

YOUR-SIGNUP-WIDGET-ID  can be found inside your signup form's popup embed code following data-object-id.

Open the popup automatically when a user visits your webpage

1. Copy and paste your popup widget embed code from Hive.

For example:

<script src="https://www.hive.co/loadwidget/" type="text/javascript"></script> 

<a class="hive-modal-launcher" target="_blank" href="https://www.hive.co/l/2rd66" data-widget-type="signup" data-object-id="857">YOUR LINK TEXT HERE</a>

1. Then, add  style="display: none !important;" within the brackets to hide the link on the page.

For example:

<a class="hive-modal-launcher" target="_blank" href="https://www.hive.co/l/2rd66" data-widget-type="signup" data-object-id="857" style="display: none !important;">YOUR LINK TEXT HERE</a>

1. Next, paste in the JavaScript below. This will make the popup open automatically on page load. Once a user has seen the signup page popup once, this code uses a unique identifier (cookie) to make sure they won't see the popup again once they've dismissed it.

<script type="text/javascript">
  // this code will open up the signup popup automatically once the page is loaded
  //
  // reasons why the signup popup will not show up automatically:
  //  - the user has dismissed the signup popup in the past X days
  //  - the user is already signed up
  var autoShowSignupModal = function () {
    // if for some reason the signup popup isn't initialized yet, retry in 500ms
    if (typeof(window.USER_IS_ALREADY_SIGNED_UP) === 'undefined') {
      return setTimeout(autoShowSignupModal, 500);
    }

    if (window.USER_IS_ALREADY_SIGNED_UP) {
      return;
    }

    // if the user hasn't seen the popup before, show it to them
    // then, set a variable in the cookie that stops the user from
    // seeing it again automatically for X days (see variable numDaysToShowModalAgain)
    if (document.cookie.indexOf('shownHiveSignup') == -1) {
      var endDate = new Date();
      var numDaysToShowModalAgain = 1;
      endDate.setDate(endDate.getDate() + numDaysToShowModalAgain);
      document.cookie = 'shownHiveSignup=true;expires=' + endDate.toUTCString() + 'path=/';
      document.getElementsByClassName('hive-modal-launcher')[0].click();
    }
  }

  // show the signup popup when the document is ready
  // https://stackoverflow.com/questions/9899372/pure-javascript-equivalent-of-jquerys-ready-how-to-call-a-function-when-t
  function documentOnReady(f){/in/.test(document.readyState)?setTimeout(documentOnReady,100,f):f()}
  documentOnReady(autoShowSignupModal);
</script>

For More Advanced Users: Open the Popup From Within JavaScript Code You're Already Running on your Webpage

For example, you can hide the <a class="hive-modal-launcher"...</a> tag in the popup embed code and then click the hidden element via JavaScript.

If your embed code contained the following <a>  tag:

<a class="hive-modal-launcher" ... data-widget-type="signup" data-object-id="YOUR-SIGNUP-WIDGET-ID">...</a> 

You can hide the link using CSS (you can see below, we added the display: none !important CSS style):

<a class="hive-modal-launcher" ... data-widget-type="signup" data-object-id="YOUR-SIGNUP-WIDGET-ID" style="display: none !important;">...</a> 

Then you can add the following to open the popup via JavaScript:

document.getElementsByClassName('hive-modal-launcher')[0].click();