Embedding Content

Embedding Content
Content Sections

You can show content from another website on your page, such as a Google calendar or map, or a form from Cognito Forms. Use the Embed button in the text editor. For YouTube or Vimeo videos, use the Video button instead (see Adding Videos).

Add an Embed

Place your cursor in the text editor where the content should go, then select the Embed button in the toolbar, right after the Video button.

The Embed button in the text editor toolbar.

In the window that opens, choose the type of content from the Embedded content list:

  • IFrame – a calendar, map, booking page or other content that the other website gives you a web address for
  • Cognito Forms Embed – a form from Cognito Forms
  • HTML Sandbox and FontAwesome – for special cases; contact support before using them

The Embed window with the Embedded content list highlighted.

Embed a Calendar, Map or Other Page (IFrame)

First, get the embed address from the other website. Look for a Share or Embed option. For example, in Google Calendar it is under Settings → Integrate calendar, and in Google Maps under Share → Embed a map. If the website gives you code that starts with <iframe, copy only the address inside src="…".

Then fill in the IFrame fields:

  • URL – paste the embed address.
  • Width and Height – 100% width fills the page width. Change the height if the content is cut off or has too much empty space.
  • Title – a short description such as “Holiday calendar” or “Map to City Hall”. Screen readers read it to visitors, so it’s required.

You can leave Class, ID and Allow empty unless support tells you otherwise.

The IFrame fields with the URL and Title filled in.

What does this embed need to work?

For your visitors’ safety, embedded content can only do what you allow. Check the boxes the content needs:

  • Runs its own code – almost every calendar, map or widget needs this.
  • Has a form you can fill out and submit – for embeds with a form.
  • Needs to remember you – needed by many embeds, including Google Calendar.
  • Opens links or content in a new window – for links like Google Maps’ “Open in Maps”.
  • Lets you download a file – only if visitors download something from the embed.
  • Can navigate you away from this page – rarely needed.

If no boxes are checked, most embeds show as an empty box. A good starting point for Google Calendar is Runs its own code and Needs to remember you. For Google Maps, check Runs its own code and Opens links or content in a new window.

The What does this embed need to work checkboxes, with Runs its own code and Needs to remember you checked.

Select Embed at the bottom of the window.

Embed a Cognito Form

In Cognito Forms, open your form, select Publish, and copy the embed code. Then, in the Embed window, choose Cognito Forms Embed and paste the code into HTML Embed. Select Embed.

The Embed window with Cognito Forms Embed chosen and the HTML Embed box highlighted.

Only code from Cognito Forms is accepted. If you see an error, copy the embed code again from Cognito Forms without changing it.

Check Your Embed

In the text editor, an embed shows as a box with a short description, not the content itself. Save the page, then view it to check that the content shows and works.

An IFrame embed shown in the text editor as a box with its width, height and address.

If the embed is an empty box on the page, edit it and check one more box under “What does this embed need to work?”, then save and check again.

Edit or Delete an Embed

Click the embed in the text editor, then select the Edit (pencil) button above it to change its settings. To delete it, click the embed and press Delete or Backspace on your keyboard.

The Edit button above a selected embed in the text editor.

Save the page as Published when you are done so the public can see the embed.

Dennis Osnitsky