Skip to content

Embedding Other Websites

Sometimes you want to include content from another website directly on your Event page — an interactive map, a hotel-booking page, a city guide, or a custom page you designed in another tool. You can do this by embedding the other website using an HTML <iframe> element.

This is an advanced technique requiring Code View. If you're new to Code View, read Using the Rich-Text Editor first.

When this is useful

A few common embedding scenarios:

Use case Source
Maps and guides Google Maps (specific locations); TripAdvisor city pages
Hotels TripAdvisor hotels for your event city
Things to do TripAdvisor things-to-do listings for your event city
Restaurants TripAdvisor restaurant guides for your event city
Custom-designed pages Pages you built in another website editor with formatting Eventene's rich-text editor doesn't support

Always confirm you have permission from the content owner to embed their site, and that the target site supports embedding via <iframe> (some sites block this for security reasons).

How embedding works

An <iframe> is an HTML element that displays another web page inside a defined area on your page. You provide the URL of the page you want to embed, and the browser renders it within an inline frame.

Each of your Event's information tabs (added on the Summary menu) behaves like a mini web page that can host one or more iFrames.

Steps to embed a website

  1. Visit the website you want to embed and copy its full URL to your clipboard
  2. Open your Event in the Web App and navigate to the Summary menu
  3. Decide which Event information tab will host the embed (each tab is its own surface)
  4. Click into the edit area of that tab to activate the editor
  5. Open the "..." menu and switch to Code View (< >)
  6. Find the location in the HTML where you want the embed and paste the iFrame code (sample below)
  7. Replace INSERT-YOUR-URL-HERE with your copied URL
  8. Adjust the height to fit your content (see notes below)
  9. Switch back to the visual editor by clicking < > again
  10. Click the checkmark to save
  11. Preview the page and adjust as needed

Sample iFrame code

The values in bold are the ones you'll typically customize for your situation:

<div style="width: 100%; height: 2000px; color: black;">
  <iframe src="INSERT-YOUR-URL-HERE"
          frameborder="0"
          allowfullscreen=""
          name="iframeName"
          style="width: 100%; height: calc(100vh - 20px); margin-top: -20px;">
  </iframe>
</div>
<p style="color: black;"><br></p>

Notes on the sample

Part What it does
<div> wrapper You can wrap the iFrame in a <div> or <p>. The <div> adds no extra padding, useful if you want the embed flush with the top of the page.
height="2000px" The total height of the embedded area. Short content like a video player may need only 600px; a long page might need 5000px or more. Set this to the maximum content height — iframes don't auto-size in height.
src="INSERT-YOUR-URL-HERE" The URL of the page you want to embed. Replace the placeholder.
frameborder="0" Removes the default border around the iframe. Set to 1 for a 1-pixel border.
style="margin-top: -20px;" Optional — clips off the top portion of the embedded page (useful for hiding the source page's header). Adjust the pixel count to match what you want to clip. To show the entire embedded page without clipping, remove height: calc(...) and margin-top: -20px; and use just width: 100%;.
allowfullscreen="" Permits the embedded content to enter fullscreen mode (useful for video).

Full iFrame syntax reference

For advanced use, here's the complete iFrame element with all common attributes:

<iframe
  src="https://www.example.com"                              <!-- The URL of the embedded content -->
  width="800"                                                <!-- The width of the iframe in pixels -->
  height="600"                                               <!-- The height of the iframe in pixels -->
  name="iframeName"                                          <!-- A unique name, used for JavaScript or form targets -->
  frameborder="0"                                            <!-- Removes the default border (0 = none, 1 = border) -->
  scrolling="no"                                             <!-- Controls scrollbars (yes, no, auto) -->
  allow="autoplay; fullscreen; geolocation"                  <!-- Permissions for the embedded content -->
  sandbox="allow-scripts allow-same-origin"                  <!-- Security restrictions on the iframe -->
  loading="eager"                                            <!-- Loading strategy (eager loads immediately, lazy defers) -->
  referrerpolicy="no-referrer"                               <!-- Controls referrer info sent to the embedded site -->
  allowfullscreen                                            <!-- Allows fullscreen mode -->
  aria-label="Example iframe content"                        <!-- Accessibility label for screen readers -->
  style="border: 1px solid black; padding: 10px;">           <!-- Inline CSS for additional styling -->
</iframe>

Most embeds work fine with just src, width, height, and frameborder="0". The other attributes are useful for specific needs (accessibility, security, performance).

Common issues

The page won't embed. Some sites block iframing for security reasons (sending an X-Frame-Options header that prevents embedding). If you see a blank iframe or a "refused to connect" message, that's likely the cause. Contact the site owner or use a different embed source.

The iframe is the wrong height. Iframes don't auto-size. Increase the height attribute until your full embedded content shows.

The embedded page looks cramped on mobile. Most modern embeds are responsive, but some aren't. Test on a phone-sized screen and adjust.

Embedded video doesn't play. Add allow="autoplay; fullscreen" and allowfullscreen to the iframe attributes.

Tips

  • Test on multiple devices — desktop, tablet, phone. Embedded content sometimes behaves differently on each.
  • Use HTTPS URLs — embed sources should use https://, not http://. Mixed-content blocking will hide insecure embeds.
  • Keep performance in mind — heavy embeds (large maps, long pages) can slow down your Event page. If a page is mostly embedded content, consider linking out to it instead.
  • Confirm permission — embedding content you don't have permission to use can be a copyright or terms-of-service issue.

See Also