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 [email protected]