Dynamically Embedding Event Checkouts¶

Use the event ID from the Partner API to dynamically render embedded checkouts, cards, or full pages on your site.

Quick steps¶

1. Retrieve events via the Partner Events API.
2. Extract the _id from the event you want to embed.
3. Choose an embed style: button, card, or full page iframe.
4. Insert the HTML snippet into your site with the event ID.

Step-by-step walkthrough¶

1. Retrieve the event ID¶

Use the Partner Events API to retrieve your list of events:

GET https://3common.com/partner/events?referral_code=yourcode

Each item in the data[] array includes an internal _id:

{
  "data": [
    {
      "_id": "68757e5a4f5eacefd8ac9488",
      "name": "Sunset Yoga"
    }
  ]
}

Extract the _id value for the event you want to embed.

2. Choose an embed style¶

You can embed the event in three ways: button, card, or full page iframe.

Embed options¶

Option A: Button embed with modal checkout¶

This renders a button that opens a checkout dialog when clicked.

<div id="threeCommononButton"
     eventId="YOUR_EVENT_ID"
     type="button"
     linkToEvent="false">
</div>
<div id="threeCommononDialog"></div>
<script src="https://3common.com/scripts/embed/event_checkout_page.js"></script>

Option B: Card embed with modal checkout¶

This renders a mini event card with details and integrated checkout.

<div id="threeCommononButton"
     eventId="YOUR_EVENT_ID"
     type="card"
     linkToEvent="false">
</div>
<div id="threeCommononDialog"></div>
<script src="https://3common.com/scripts/embed/event_checkout_page.js"></script>

Option C: Full page embed via iframe¶

This renders the entire event page, hosted on 3Common, into your site.

<iframe src="https://3common.com/embed/event_view?eventId=YOUR_EVENT_ID"
  style="border: none; width: 100%; height: 100%; min-height: 600px; min-width: 400px;"
  title="3Common Event Page">
</iframe>

Dynamic integration example (JavaScript)¶

Here is a snippet to dynamically place the eventId from a Partner API response into your embed:

<script>
  async function loadEventEmbed(referralCode) {
    const res = await fetch(`https://3common.com/partner/events?referral_code=${referralCode}`);
    const json = await res.json();

    const event = json.data?.[0];
    if (!event) return;

    document.getElementById("threeCommononButton").setAttribute("eventId", event._id);
  }

  loadEventEmbed("your-partner-code");
</script>

<!-- Embed Template -->
<div id="threeCommononButton" type="button" linkToEvent="false"></div>
<div id="threeCommononDialog"></div>
<script src="https://3common.com/scripts/embed/event_checkout_page.js"></script>

Popup checkout behavior¶

When linkToEvent="false" is used on a button or card embed, clicking the element opens an inline checkout dialog directly on your page with no redirects needed. This provides a seamless checkout experience without navigating away from your site.

Best practices¶

• Always use the latest event._id directly from the API.
• Avoid hardcoding event IDs if you expect dynamic or rotating events.
• Set linkToEvent="true" if you prefer redirect behavior instead of inline checkout.
• Always include the <script> tag below the embed to activate behavior.