You want to display a Perplexity Space directly on your website so visitors can search your curated knowledge base without leaving your page. Perplexity Spaces let you organize sources, prompts, and custom instructions into a focused search environment. Embedding a Space uses an iframe code that loads the Space interface inside your site. This article explains how to generate the embed code, adjust its appearance, and add it to your webpage.
Key Takeaways: Embedding a Perplexity Space
- Space Share menu > Copy embed code: Generates an iframe snippet for your Space.
- Width and height attributes in the iframe: Controls how the Space appears on your page.
- Public Space visibility setting: Your Space must be set to Public for embedding to work.
What Is a Perplexity Space and Why Embed It
A Perplexity Space is a curated search environment where you define the sources, instructions, and focus area. You can add URLs, upload documents, and set custom prompts. When someone searches within a Space, Perplexity returns answers limited to the sources you provided.
Embedding a Space places that interface inside a webpage. Visitors can type questions and get answers without leaving your site. This is useful for documentation hubs, knowledge bases, customer support pages, or internal wikis.
Before embedding, you need a Perplexity Pro account. The Space must be set to Public. You also need access to the HTML source of your website or a platform that supports iframes.
Steps to Get the Embed Code for a Perplexity Space
- Open your Space in Perplexity
Log in to your Perplexity account. Navigate to the Space you want to embed. The Space must already have sources added and be saved. - Click the Share button
In the top-right corner of the Space page, click the Share icon. It looks like a link chain or an arrow pointing out of a box. - Set the Space visibility to Public
In the Share menu, find the visibility setting. Change it from Private to Public. A Public Space is required for embedding. Private Spaces cannot be embedded. - Copy the embed code
After setting the Space to Public, the Share menu displays an option labeled Copy embed code. Click it. The code is an iframe snippet that looks like this:<iframe src="https://www.perplexity.ai/s/..." width="100%" height="600"></iframe>. The URL contains a unique identifier for your Space. - Paste the code into your website
Open the HTML editor of your website builder, CMS, or page template. Paste the iframe code where you want the Space to appear. Save and publish the page.
Adjust the iframe Width and Height
The default embed code uses width="100%" and height="600". You can change these values to fit your layout. For a sidebar, use width="300". For a full-page section, use width="100%" and height="800". The height is in pixels. Test the Space on mobile devices to ensure the iframe does not overflow.
Add a Border or Styling
You can wrap the iframe in a div with CSS styling. For example, add a border, rounded corners, or a shadow. Here is an example:
<div style="border:1px solid #ccc;border-radius:12px;overflow:hidden;">
<iframe src="https://www.perplexity.ai/s/YOUR_SPACE_ID" width="100%" height="600" style="border:none;"></iframe>
</div>The style="border:none;" inside the iframe removes the default iframe border. The outer div provides the visible border and rounded corners.
Common Issues When Embedding a Perplexity Space
The Space Does Not Appear on the Page
If the iframe shows a blank area, check that the Space is set to Public. Open the Share menu again and confirm the visibility. Also verify that the iframe URL is correct. The URL should start with https://www.perplexity.ai/s/. If you copied the wrong link, repeat the steps above.
The Space Shows a Login Prompt
A login prompt appears when the Space is Private or when the embed code was copied before making the Space Public. Go back to the Space, change visibility to Public, and copy the embed code again. Replace the old iframe code on your website with the new one.
The iframe Is Too Small on Mobile Screens
Mobile browsers may crop or shrink the iframe. Set the width to 100% and use a responsive height. Add a CSS media query to increase height on small screens:
@media (max-width: 600px) {
.perplexity-embed iframe {
height: 800px;
}
}Replace .perplexity-embed with the class name of your container div.
The Space Loads Slowly
Perplexity Spaces load content dynamically. If the iframe takes more than a few seconds, check your internet connection. The Space itself may have many sources or large documents. Reduce the number of sources in the Space to improve load time.
Perplexity Space Embed vs Direct Link: Comparison
| Item | Embedded Iframe | Direct Link |
|---|---|---|
| User experience | Stays on your website | Opens a new tab |
| Customization | Adjust width, height, border, styling | No control over appearance |
| Requires Public Space | Yes | Yes |
| SEO impact | Search engines index the iframe URL, not content inside | Search engines index the Space page separately |
| Mobile compatibility | Works with responsive CSS | Works natively on mobile browser |
Now you can embed a Perplexity Space into any website that supports iframes. Use the Share menu to copy the embed code after making the Space Public. Adjust the width and height to match your page layout. For a polished look, wrap the iframe in a styled div. If the Space does not appear, verify the visibility setting and the iframe URL.