With the Pro extension, it is possible to open a light box automatically, depending on the URL hash used by the visitor. This can be useful for links in a mailing or when sharing links on social media, and you wish visitors that follow such a link, to be presented with an automatic light box popup.

You can have different popups available on a single page or across your website (with an HTML widget in footer or sidebar) that will react to the URL hash code, the part after the URL following #..

For example, you could to show a detailed product description in a popup on a product page via a link like this https://your.site/products/my-product/#details from an advertisement e-mail, while this popup does not show when visitors browse to the product page (https://your.site/products/my-product/ without the #hash) via normal navigation on your site.

The following steps assume you do not already have a link or button that opens a FancyBox light box on your site. If you have such a link already, you’ll have to adapt the existing link code to match this example.

1. Go to Settings > Media and find the FancyBox option Open on page load under Auto popup in the Miscellaneous section. Set it to “Link with ID matching URL hash” then set the value Delay in milliseconds to “0” (zero)* and Save Changes.
2. Go edit the page where you wish to be able to use this popup. If you want it to be available on every page on your site, follow the next steps but place all code in a HTML widget in the sidebar or footer.
3. Insert an HTML block with this code:
   <a href="#product-details" class="fancybox-inline" id="details">Details</a>
   **
4. Next, on a new line paste this: <div class="fancybox-hidden"><div id="fancyboxID-1" class="hentry" style="width:460px;max-width:100%;">
5. Below this HTML block, you can now insert content like your detailed product description or a subscription form (shortcode or block) or anything else.
6. Finally, place another HTML block below your popup content containing this: </div></div>
   ***
7. Now save your page/post and view the result on the public side.

Test the button/link to see if the popup works. If it doesn’t, edit your page/post again and verify your code.

Test the URL hash: copy your page/post URL (web address), open a new browser tab, and paste the copied URL in the address bar without hitting enter. Then type #details after the URL and then hit Enter. The page should load and the popup should automatically open.

Notes and tips:

*) The default delay for automatic popups is one second but used in combination with a URL hash, a low value (can be 0) is best to prevent users interacting with the page before the popup opens. You can adjust this on Settings > Media under Auto popup in the Miscellaneous section.

**) You can use a class like button (depends on your theme) or a custom class to style the link as a button. If you do not wish the link to be visible at all, hide it by removing the link text (“Details” in this example) or giving it the class fancybox-hidden.

***) If you forget these closing div tags, your page will look very weird like missing sidebars or footer, or even completely unusable! Go back to edit the page/post (or widget) and make sure the two closing div tags are properly placed after the inline content.