In this tutorial, we want to embed a project’s content into your website so users do not need to visit an external project application to view its details. 

First, under the Page & Survey tab, go to your project. In this example, the project is called U-4414: All American Freeway Widening. 

Tip: If you are not logged in as an administrator, scroll right down to the bottom of the page and click Admin Access. This will take you to your project’s admin zone and ensure you have the required privileges to create Embed Code and update your website with project content.

You will create the Embed Code in the Settings tab. To get to Settings, scroll to the far right of the admin zone page.

In the Settings tab, click Get Embed Code.

The Select an Embed Type popup will be displayed. There are several Embed options. For instance, the Standard Poll Series option allows you to work through survey questions one at a time. 

In this example, we shall select Project Page Embed, which will allow us quickly to get the code to embed questions, surveys and content in one place, i.e. your website or CMS.

In the Project Embed Options popup, you can specify how you want your content to be displayed.

The Auto Width Embed option (1) is the best option for standard web pages if your CMS is javascript-enabled. This Embed Code will adjust the width and height of the embed automatically to the content you are serving. 

If your CMS does not support javascript, select the Fixed-height i-frame embed option (2). This option is less vertically responsive but it will still do the job adequately to display your website content.

Next, copy the Embed Code you have chosen to use and then head over to your CMS. In this example, we are using a Square Space page. Now we can paste the copied Embed Code for the project into the CMS and save the changes.

You will want to check if the content is displaying correctly in the front-end. As the content loads, the Embed Code will adjust the height and width of the content to display optimally in users’ browsers. 

Learn more about embedding in a specific language here.

Did this answer your question?