In this guide, learn how to embed your published program from Joi into an EventsAIR website.

Step 1: Add a menu block in EventsAIR

1. In your EventsAIR website, create a new menu block.
2. Click the gear icon to open the HTML builder.
3. Click the + icon on the left-hand side then click Basic.
4. Select the option that has no background image and one text block (the second option at the time of writing).

Step 2: Copy your embed code

1. In Joi, open your event and navigate to the Program / Build view.
2. Click on the Publish tab.
3. Open the published program you would like to embed.
4. Click the Embed button.
5. Click the Copy code button.

Step 3: Embed into EventsAIR

1. Back in EventsAIR, click the code icon on the left-hand side.
2. Paste the embed code inside the inner-most <div> tag — it should look something like this:

<div class="is-section is-section-auto is-box is-bg-grey">
  <div class="is-boxes">
    <div class="is-box-centered">
      <div class="is-container is-builder container-fluid-fluid" id="contentareabF1Y8hi">PASTE EMBED CODE HERE</div>
      </div>
    </div>
  </div>

3. Click OK, then Update, then Save & Publish.
4. In the Design tab, click on the URL that takes you to your event website to see your Joi program embedded into the page.