Integrate an iframe in your community

An iframe allows you to display external content (survey, form, tool) directly inside a page of your community, without redirecting users to another website.

What is an iframe

In other words, instead of redirecting users to another website, it created a visible "window" where external content is displayed. Users can interact with it as if it were part of your community.

This is especially useful to keep a smooth experience and avoid breaking the user journey.

Good news, you can integrate an iframe in your community thanks to a Custom page!

Integrate an iframe

Follow these steps to integrate an iframe in your community:

Step 1 - Create a Custom page

1. Go to Configuration > Custom pages
2. Click + Add a custom page
3. Define the Custom page title and description. 

Step 2 - Add iframe code

1. In the text editor, click Source
2. Copy and paste the following code:
   
   <div class="resp-container">
   <iframe align="middle" allow="encrypted-media" allowfullscreen="allowfullscreen" class="resp-iframe" frameborder="0" gesture="media" height="640" longdesc="CUSTOM_PAGE_DESCRIPTION" name="CUSTOM_PAGE_TITLE" scrolling="yes" src="REDIRECT_LINK" width="640">
   </iframe>
   </div>
    
3. Replace the following elements in the code:
   
   CUSTOM_PAGE_DESCRIPTION with the description of your Custom page
   CUSTOM_PAGE_TITLE with the title of your Custom page
   REDIRECT_LINK with the URL of the content you want to display in the iframe
    
4. Click again on Source to return to normal view
5. Click Save

See a concrete example

For example, you created a satisfaction survey in Feedback Management by Skeepers and you want to display it in your community. 

 

This lets members answer without leaving the platform, while you choose where to place it.

 

It will look like this in the community -->

 

This setup is useful when you want to collect feedback after an event, measure satisfaction about a product, or launch a one-time study for your members. 

 

In this example:

• Title: Customer satisfaction survey
• Description: Please take our satisfaction survey and let us know what you think of your online purchase!
• Redirect link: the public link generated from Feedback Management

 

Here's what the iframe code will look like: 

<div class="resp-container"> <iframe align="middle" allow="encrypted-media" allowfullscreen="allowfullscreen" class="resp-iframe" frameborder="0" gesture="media" height="640" longdesc="Please take our satisfaction survey and let us know what you think of your online purchase!" name="Customer satisfaction survey" scrolling="yes" src="https://iframe_survey_link_example" width="640"> </iframe> </div>

Step 3 - Integrate the Custom page in your community

To make your iframe accessible to users, you need to integrate the dedicated Custom page in your community. To do so, you can create a Channel to host it:

1. In Configuration > Channels, click + Add a channel
2. Choose the Custom Pages channel type 
3. In the Custom Pages drop list, select the dedicated iframe page
4. Choose a title for your channel 
5. Click Create
6. The channel will appear in your menu. Feel free to move it to the right spot!