Integrating Nira Assets into a WordPress page (Lightbox)

To integrate some Nira assets into a lightbox-style popup on a WordPress page:

1. Install a popup plugin for WordPress. This example uses Popup Maker, but other plugins that support some way of entering raw HTML and JS should also work - https://wordpress.org/plugins/popup-maker/

2. In your WordPress admin panel, click the Popup Maker > Create Popup option

3. Give your popup a name of your choosing.

4. For the content of the popup, add a raw HTML and raw JS section to the page. The HTML content can be something like this:

<iframe data-nira-asset-id="NIRA_ASSET_ID_GOES_HERE" id="niraEmbedAsset1" data-lazy-load="1" data-close-on-hide="1" style="width: 95vw; height:95vh"></iframe>

• Instead of NIRA_ASSET_ID_GOES HERE, enter a Nira asset ID. You can find the Nira asset ID in the URL of the Nira asset youd like to display. For example, here is a Nira Asset URL: https://publicnira2.nira.app/a/btk2lMXES_GS_kssfEYNYA/1
  The Asset ID for this URL is "btk2lMXES_GS_kssfEYNYA" (not including quotes). Do not include the additional forward slash and number at the end of the URL -- this is a version number and shouldn't be included.
• For the id="niraEmbedAsset1", this can be anything of your choosing, but you'll need to adjust the javascript code below to match with it.
• The raw JS section should be below your HTML section, and include:

<script src="https://YOUR_NIRA_SITE/embed.js"></script>
<script>
document.addEventListener("DOMContentLoaded", () => {
niraEmbedInit(document.getElementById("niraEmbedAsset1"));
});
</script>

Ensure that you change YOUR_NIRA_SITE to your Nira URL. For example, the entire src tag should be something like "https://publicnira2.nira.app/embed.js". Also ensure that the id you pass to document.getElementBy matches what you used in the iframe id above.

Your page editor will probably look something as shown in the image below. Note, we're using WPBakery Page Builder and Salient Templates in this example, so yours may vary.

5. Next, scroll down to the popup settings section, and configure things as shown in the screenshots below, tweaking the settings to your own preferences as needed. On the first page of settings, notice that "#nira-preview-popup" has been used for the "Click open" trigger. You'll need to set this as the ID for the button or other element that you'd like to open this popup.

6. Add the #nira-preview-popup id to any button or element on your pages that you'd like to have open this popup, and you should be all set! You can repeat this process for each Nira asset that you'd like to have a popup for, creating a separate Nira popup and separate button and button id for each one.