Embedding Avela Explore in your website

Embed Avela Explore on your website so families can find and learn about schools without leaving your page. An iframe displays your organization's Explore school finder within your website.

Before you begin

Have your organization's exact public Explore URL ready. If you're unsure which URL to use, ask your Avela CS representative. Open it in a browser and confirm that it shows the correct schools. Use the full URL provided to you.
Make sure you can edit your website and add a custom HTML block that accepts an iframe. The name and availability of this block depend on your website platform and account permissions.
Choose a page where families will look for schools, such as Find a School or School Directory. Place the finder in a wide content section with a short heading and introduction.

Add Explore to your page

1 Open the page in your website editor

Choose a full-width or single-column section. Avoid placing Explore in a sidebar or a narrow column beside other content.

2 Add a custom HTML block

Look for a block called Custom HTML, Embed, or Code. Use a block that accepts HTML rather than a text block or a video embed.

If your editor removes iframe or style tags, ask your web team which approved block or template to use.

3 Paste and customize the embed code

This example loads the Avela demo. Replace both demo URLs with your organization's URL before publishing.

<style>
  .avela-explore {
    width: 100%;
    max-width: 1200px;
    margin-inline: auto;
  }
  .avela-explore iframe {
    display: block;
    width: 100%;
    height: 800px;
    border: 0;
  }
  @media (max-width: 767px) {
    .avela-explore iframe { height: 700px; }
  }
</style>
<div class="avela-explore">
  <p><a href="<https://explore.avela.org/demo>" target="_blank" rel="noopener">Open the school finder in a new tab</a></p>
  <iframe
    src="<https://explore.avela.org/demo>"
    title="Search schools with Avela Explore"
    width="100%"
    height="800"
    loading="lazy">
  </iframe>
</div>

Before saving:

Replace the demo URL in both the iframe and the full-view link with your exact public Explore URL.
Replace the iframe title with a short description, such as Springfield Schools school finder. The title helps people using screen readers identify the embedded content.
Keep the full-view link visible above the finder. It gives families a way to open Explore in a full browser tab, including when the embedded view feels too small.

4 Set the container width and height

Use these starting points, then adjust for your page and Explore configuration:

Desktop: use the full available width of a wide, single-column section. Aim for about 1024 pixels or more of usable width when space allows, so the map and list have room to appear side by side.
Phones and narrow screens: keep the iframe at 100% of the available width. Do not set a large fixed width or minimum width. Explore can use a compact layout with controls for switching between the map and list.
Height: start with 800 pixels on desktop and 700 pixels on phones. Adjust for your site's header and available screen height, and increase the height if results or details feel cramped. A 480-pixel-tall embed leaves much less room for browsing. A taller embed may require more scrolling on the surrounding webpage.

The example centers the finder and allows it to grow to 1200 pixels wide. Its CSS changes the height from 800 to 700 pixels when the webpage viewport is 767 pixels wide or narrower. Adjust these height values if your page needs more room.

Explore responds to the width available inside the iframe. A narrow website column can show a compact layout even on a large desktop screen. Widen the page section if you want to give the map and school information more room.

Keep both the surrounding webpage and Explore's school lists, filters, and details scrollable. Do not add code that hides overflow or disables scrolling to make the embed fit.

5 Test and publish

Preview the page at desktop and phone widths, then test on the browsers and real mobile devices your families use. Once the checks below pass, publish the page and repeat the checks on the published URL. Some website editors display embeds differently in preview.

Promoting and linking your Explore site

Related to