Jaswinder Singh
Introduction
Prismic is a headless content management system (CMS) that leverages an API to organize and distribute content for developers and content teams. By separating the front end from the content management back end, developers can build websites and applications using any front-end technology, such as React, Next.js, Vue, and more.
While Prismic doesn’t have a built-in method for embedding iframe, you can achieve this using a Rich Text or Key Text field. In this blog, we’ll guide you through the process of embedding iframe in your Prismic-powered Next.js site, making it easy to display external content effortlessly
Why Use an iframe in Prismic and Its Common Uses?
Embedding iframe in your Prismic-powered Next.js site is a convenient way to display external content without hosting it yourself. This approach is beneficial for various purposes, including:
YouTube or Vimeo Videos
YouTube or Vimeo Videos By embedding videos from YouTube or Vimeo, you can deliver high-quality content without consuming your server’s storage. This ensures smooth playback, optimized performance, and access to platform features like captions and adaptive streaming.
Google Maps
Google Maps An iframe makes it easy to embed interactive Google Maps, allowing users to find locations without leaving your site. This is ideal for displaying business addresses, directions, or multiple location markers.
Google Forms and Surveys
Google Forms and Surveys Integrate forms from platforms like Google Forms or Typeform to collect user responses efficiently. This ensures secure data storage while maintaining a seamless user experience.
PDFs & Documents
PDFs & Documents Iframe enable you to embed PDFs, Word documents, or manuals directly on your site. This allows users to view, read, or download files without needing additional software.
Hi, my name is Jaswinder, let's talk about your business needs.
I will do my best to find a reliable solution for you!
Embedding iframe in Prismic with a Slice
Since Prismic does not provide a built-in method for adding iframe, we will use a Slice to dynamically manage and display iframe content. In the next steps, we’ll guide you through creating and integrating an iframe Slice in Prismic, making it easy for content editors to embed iframe without touching any code.
Step 1: Create the iframe Slice in Prismic
Open your local Slice Machine.
Click on "Slices" and create a new Slice named IframeEmbed.
Navigate to your Custom Type (e.g., Page or Blog Post) and add the newly created Slice.
Add a Key Text field and name it iframe Url (this will store the iframe link).
(You can also choose the field name according to your preferences)
Click Save and push changes from the Review changes.
Step 2: Add the iframe Slice in Prismic
Go to your Prismic Dashboard.
Choose the page where you want to display the Slice.
Add the iframe code you want to embed.
*Below Example Of Youtube iframe
<iframe width="560" height="315" src="https://www.youtube.com/embed/RK1RRVR9A2g?si=69-zYJlVqoqVx7eT" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>Save the changes and publish the page.
Step 3: Fetch and Render Slices on Your Page
Ensure your Next.js page (pages/index.js or pages/[uid].js) is set up to render slices:
import Head from "next/head";
import { SliceZone } from "@prismicio/react";
import { components } from "../../slices";
import { createClient } from "@/prismicio";
export default function Page({page}) {
return (
<>
<Head>
<title>{page.data.meta_title}</title>
<meta name="description" content={page.data.meta_description} />
</Head>
<div>
<SliceZone slices={page.data.slices} components={components} />
</div>
</>
);
}
export async function getStaticProps({ previewData }) {
const client = createClient({ previewData });
const page = await client.getSingle("homepage");
return {
props: { page },
};
}
Then navigate to your "Slices" folder and locate the IframeEmbed/index.js file
Update it to render the iframe
// slice/IframeEmbed/index.js
import React from "react";
const IframeEmbed = ({ slice }) => {
const iframeUrl = slice.primary.Iframe_url; // Extracting the iframe URL from the slice
return (
<section
data-slice-type={slice.slice_type}
data-slice-variation={slice.variation}
>
<div dangerouslySetInnerHTML={{ __html: iframeUrl }} /> // Rendering the iframe URL as HTML
</section> /
);
};
export default IframeEmbed;If you have a direct link for the src attribute, such as:
"https://www.youtube.com/embed/RK1RRVR9A2g?si=69-zYJlVqoqVx7eT"
*You can use the following code:
import React from "react";
const IframeEmbed = ({ slice }) => {
const iframeUrl = slice.primary.Iframe_url;
return (
<section
data-slice-type={slice.slice_type}
data-slice-variation={slice.variation}
>
<iframe
width="560"
height="315"
src={iframeUrl}
title="YouTube video player"
frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
referrerpolicy="strict-origin-when-cross-origin"
allowfullscreen
></iframe>
</section>
);
};
export default IframeEmbed;Open your Next.js site and check if the iframe is embedded correctly.
Seamlessly Manage Embedded Content in Prismic
Embedding iframe content in Prismic-powered Next.js websites enhances functionality and user experience without requiring complex backend modifications. Whether you're integrating videos, maps, forms, or external web pages, using Slices allows content editors to manage embeds dynamically. This approach not only simplifies content updates but also ensures a clean and structured implementation, keeping your website flexible and scalable.
How We Can Help with Your Prismic Development
At RW Infotech, we specialize in Prismic and Next.js development, helping businesses create seamless, dynamic, and scalable web experiences. Whether you need custom slices, efficient content workflows, or optimized iframe embedding, our expert team ensures smooth integration tailored to your needs. Let us handle the technical complexities so you can focus on delivering exceptional content. Get in touch with RW Infotech today and elevate your Prismic-powered website!
Frequently Asked Questions
Find answers to the most common questions about Embed iFrame in Prismic
An iframe is an HTML element used to embed external content like videos, maps, or forms directly into a webpage. It allows websites to display third-party content without hosting it on their servers. This feature is useful for integrating external services while maintaining site structure and functionality.
Yes, you can embed YouTube videos in Prismic by copying the YouTube embed link and storing it in a Key Text field. Then, render it inside an <iframe> tag in your Next.js component. This approach ensures smooth video playback without consuming your server’s storage.
To add an iframe using Slices, create a new Slice in Prismic and add a Key Text field for storing the iframe URL. Fetch and render the iframe dynamically in your Next.js page. This method allows content editors to embed iframe content without needing coding skills.
Yes, you can embed Google Maps in Prismic by obtaining the embed link from Google Maps and storing it in a Key Text field. Rendering it inside an <iframe> tag in your Next.js component allows users to view maps seamlessly on your site without leaving the page.
Yes, RW Infotech specializes in Prismic and Next.js development, offering seamless integrations and custom solutions. We assist with iframe embedding, custom Slices, and efficient content workflows. Contact us to enhance your website’s functionality and ensure a smooth, scalable experience.
News & Insights
We like to share our thoughts on topics we find inspiring. Explore our news and insights.
How to Integrate Netlify Forms with Prismic
Integrate Netlify Forms with Prismic for effortless form handling without a backend. Leverage built-in spam protection and automated submissions.
What Is Structured Data? Why Is It Important For SEO?
Structured data enhances SEO by helping search engines understand and display content more effectively. It improves search visibility, enables rich snippets, and boosts click-through rates, making content more accessible and engaging for users.