You have some information/news that you would like it to open automatically in a popup window/lightbox once the page is loaded, you want to highlight an important message to all site visitors in a popup/lightbox window, we're here to tell you how to do it..




Step 1: Add a ShortPoint Element with a Lightbox Linking to the Page

Add any ShortPoint element that supports adding links to your page (e.g: We'll use button for this example),

Specify the link for the page you want it to open automatically on page load,

Set the linking option to lightbox as well



Step 2: Set an ID for the ShortPoint Element

For the same element we added in the previous step, switch to the Custom CSS tab, and give it an ID openMe






Note: If the ShortPoint Element that has your popup link resides inside an Items/Tiles tab (as shown below), you need to set the ID from the Items/Tiles tab, not from the Custom CSS tab.



Step 3: Add JavaScript to Automatically Click your Link

So far we have a link on the page that once you click on it, it will open your desired popup, the only thing that is left, is that we need to make that link to open automatically once the page is loaded.


To do that we need to add a Script Editor Web Part to the page, and add the following code to it.


<script type="text/javascript">
(function() {
  /**
   * hook method to be executed as soon as shortpoint
   * rendered on the page
   */
  function ShortPointReady() {
    shortpoint.$('#openMe').click();
  };
  // shortpoint not yet available in the page
  // wait for shortpoint render dom event
  document.addEventListener( 'shortpoint-render-above-fold', function() {
    // exit on edit mode
    if( window.shortPointInserter ) {
        return;
    }
    setTimeout( ShortPointReady , 500);
  });
})();
</script>


Now save the page, and your popup will appear every-time a user visits your page.


Note: if you want to open popup based on specific condition, please follow this article.