Pagefly Integration | Lantern - Product Quiz Builder Help Center

If you prefer, you can check out this information in video format.

To use the Lantern quizzes in PageFly, ensure you have completed the following:

Install the Lantern - Product Quiz Builder app on your store.
Install the PageFly app on your store.
Configure all necessary options

How to access Lantern - Product Quiz Builder Element

Follow these steps to access Lantern - Product Quiz Builder element in Pagefly

Step 1: On the left side of your Shopify App menu, Open Pagefly Page Builder

Step 2: Go to Extra functions, on the Integrations click Manage

Step 3: Search Lantern and make sure the status is Active after clicking Activate

You can also activate Lantern element inside the PageFly Page Builder

Step 4: Navigate to "Pages" and select "Create Blank Page" or "Create from Template." You also have the option to import and export pages that you've created.

Step 5: On the PageFly Page Builder, click Add third-party elements on the left menu bar

Step 6: Click on "Lantern" and then drag and drop the Lantern Quiz onto the page you're building

The Lantern ‑ Product Quiz Builder element comes with 1 variant which is Lantern Quiz.

Configure Lantern ‑ Product Quiz Builder Element

General Tab: Once you’ve added the Lantern element to your page, click it to adjust settings.

• Styling Tab (Optional): PageFly offers options like margins, borders, and effects. Access them in the “Styling” tab for customization. Refer to this article for more details.

Paste the API Key and select the quiz you want to display from the dropdown menu labeled "Quiz list."

NOTE: You can get the Api Key in Lantern Dashboard under Integrations tab

Click Save and Publish the Page to make it go live

Custom code for perfect PageFly integration

In order to achieve the same visual results you get with embedding a Lantern quiz via App Blocks in your Shopify Theme you will need to add the following JavaScript code into the custom code section of PageFly for this section:

<script>
    let has_scrolled = false;
    let lantern_iframe_height = 0;
    let lantern_iframe_height_timestamp = 0;

    window.addEventListener("scroll", function() {
      has_scrolled = true;
    });

    (function() {
      window.addEventListener("message", function(e) {
        if (e.data.action === "resize" && e.data.frameHeight) {
          console.log(`received message to resize the iframe by ${e.data.frameHeight}px`);
          const iframes = document.querySelectorAll("iframe");
          const lantern_iframe = Array.from(iframes)?.find(iframe => iframe.contentWindow === e.source);
          if (e.data.frameHeight > lantern_iframe_height || Date.now() - lantern_iframe_height_timestamp > 2000) {
            console.log(`resizing iframe to ${e.data.frameHeight}px`);
            lantern_iframe_height = e.data.frameHeight;
            lantern_iframe_height_timestamp = Date.now();
            lantern_iframe.style.height = `${e.data.frameHeight}px`;
          }
          if (lantern_iframe.dataset.inView && has_scrolled) {
            lantern_iframe.scrollIntoView();
            setTimeout(() => {
              window.scrollBy(0, 1);
            }, 25);
          }
        }
      }, false);

      const iframe_in_view_observer = new IntersectionObserver((entries) => {
        entries.forEach(entry => {
          if (entry.isIntersecting) {
            entry.target.dataset.inView = true;
          }
        });
      });

      const iframes = document.querySelectorAll("iframe");
      iframes?.forEach(iframe => iframe_in_view_observer.observe(iframe));
    })();
  </script>

If you have any questions or need support in setting this up in PageFly please don't hesitate to contact our support team using the in-app chat toggle or by e-mail at support@trylantern.com