How to embed a program into an EventsAIR website

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>

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