How to Implement Apollo.io Meeting Scheduler on WordPress & Elementor (Step-by-Step Guide)

If you’re using the AI Sales Platform Apollo.io for meeting scheduling, the simplest way to implement this feature on your website is to link your “Book a Meeting” CTA directly to your Apollo Scheduling Page (e.g., https://app.apollo.io/#/meet/xyz).

This method is quick and easy, but it comes with several downsides:

• ❌ No native Google Analytics 4 integration
• ❌ Limited design customization
• ❌ The visitor leaves your website

If you want a more professional and user-friendly solution, you can build a custom implementation using the Apollo Inbound Router and Intake Form.

This approach allows you to load the Apollo Widget directly on your website, giving you full control over design, tracking, and user experience.

Let’s see how we built this custom solution for our client, Pinsight.

Here’s a simple, step-by-step guide. Enjoy! 👇

1. Apollo.io: Create a Scheduling Page

Navigate to Apollo → Meetings → Scheduling Pages, and create a new Scheduling Page.
This will serve as the base for your custom integration.

Once created, you can choose whether to simply link to this page or continue building a more advanced, embedded solution.

Make sure your availability settings are properly configured under Apollo → Meetings → Availability & Tools before proceeding.

2. Apollo.io: Build an Intake Form

In this solution, a successfully submitted Intake Form will act as a trigger to load the Apollo Widget.

Go to Apollo → Meetings → Admin Console → Intake Forms, and create a new form.

At minimum, include the following required fields:

• Email
• Name (you can split this into First Name and Last Name)

You can also add additional pre-defined or custom fields according to your needs.

3. Apollo.io: Set Up an Inbound Router

Next, go to Apollo → Meetings → Admin Console → Inbound Router, and create a new one.

For the solution we are talking about the simple two The logic is similar to what you might know from Zapier.
For this use case, a simple two-step flow is sufficient (though you can expand it if needed):

1. Intake Form → select the form you just created
2. Book Meeting → select your Scheduling Page

In essence, this inbound router defines:
“Open the Apollo Book Meeting Widget when the Intake Form is submitted.”

Once the Inbound Router is active, go to Share → Integrate with your website form to obtain the code snippet required to activate it on your website.
It should look like this:

  <!-- Apollo widget begin -->
    <script
      type="text/javascript"
      src="https://assets.apollo.io/js/meetings/meetings-widget.js"
      onload='window.ApolloMeetings.initWidget({appId: "XYZ", schedulingLink: "XYZ"})'
      defer
    ></script>
  <!-- Apollo widget end -->

💡 Tip:
Don’t forget to add both domain variants to Integrated Domains for a reliable setup:

https://xyz.xyz
https://www.xyz.xyz

4. Website: Build a “Mirrored” Intake Form

Now that everything is ready in Apollo, it’s time to prepare your website form — this form should mirror the Apollo Intake Form exactly.

Start by checking your field names in Apollo → Inbound Router → Share.
You’ll use these as the name attributes for your HTML inputs, for example:

<input type="email" name="email" placeholder="[email protected]" required autocomplete="email" />

Option A: Elementor Form

If you’re using Elementor, the Elementor Form widget is the most convenient choice.

Advantages:

• Pre-defined styles from global variables
• Native reCAPTCHA v2/v3 integration
• Honeypot field option
• Multiple built-in actions after submit
• Webhook support (great for future integrations like Zapier)

However, you’ll need some customization:

• Elementor only outputs the ID attribute, not the name attribute required by Apollo.
  You’ll need to modify the form markup to include proper name attributes.
• You’ll also need to customize the “After Submit” action to trigger the Apollo Widget load event — Elementor doesn’t handle this natively.

💡 Tip: Don’t be afraid using AI to write a few lines of JavaScript to make it work smoothly. ✨

Option B: Custom form (HTML Elementor Element)

If you want more flexibility, you can skip the Elementor Form widget entirely and build your own pure HTML form using the HTML widget.

Here’s a simple example:

<form id="apollo-form" novalidate class="apollo-form">

  <div class="row row-2col">
    <label>First Name *
      <input type="text" name="first_name" placeholder="Taylor" required autocomplete="given-name" />
    </label>
    <label>Last Name *
      <input type="text" name="last_name" placeholder="Smith" required autocomplete="family-name" />
    </label>
  </div>
  <div class="row">
    <label>Work Email *
      <input type="email" name="email" placeholder="[email protected]" required autocomplete="email" />
    </label>
  </div>
 
  <button type="submit" id="apollo-submit">Confirm</button>
  
</form>

Basic styling will automatically inherit from your Elementor design variables, but you can fine-tune it with custom CSS.

🛡️ Security Tips:

• Handle success and error messages gracefully
• Integrate reCAPTCHA v2/v3
• Add a Honeypot field

5. Website: Integrate the Inbound Router

Next, you’ll connect your form to the Apollo Inbound Router using the following script.
Use your own APP_ID and SCHEDULING_LINK values from the Apollo code snippet.

<script>
(function () {
  const APP_ID = "XYZ"; //Replace with your appID from the Inbound Router Code Snippet
  const SCHEDULING_LINK = "XYZ"; //Replace with your schedulingLink from the Inbound Router Code Snippet
  const APOLLO_SRC = "https://assets.apollo.io/js/meetings/meetings-widget.js";

  // Load Apollo script once
  function loadApollo() {
    return new Promise((resolve, reject) => {
      if (window.ApolloMeetings) return resolve();
      const s = document.createElement("script");
      s.src = APOLLO_SRC;
      s.async = true;
      s.onload = resolve;
      s.onerror = reject;
      document.head.appendChild(s);
    });
  }

  function bind() {
    const form = document.getElementById("apollo-form");
    if (!form || form.__bound) return;
    const button = document.getElementById("apollo-submit");

    loadApollo().then(() => {
      window.ApolloMeetings.initWidget({
        appId: APP_ID,
        schedulingLink: SCHEDULING_LINK
      });

      form.addEventListener("submit", function (e) {
        e.preventDefault();
        if (form.reportValidity && !form.reportValidity()) return;

        window.ApolloMeetings.submit({
          formId: "apollo-form",
          preventRedirect: true
        });
      });

      if (button) {
        button.addEventListener("click", e => {
          e.preventDefault();
          form.dispatchEvent(new Event("submit", { cancelable: true, bubbles: true }));
        });
      }

      form.__bound = true;
    }).catch(console.error);
  }

  if (document.readyState === "loading") {
    document.addEventListener("DOMContentLoaded", bind);
  } else {
    bind();
  }

  document.addEventListener("elementor/popup/show", bind);
})();
</script>

Once connected, the Apollo Widget will load directly on your page after the form is submitted.
By default, it appears in a modal window.

6. Website: Customize & Track

Because the Apollo Widget renders as pure HTML, not within an iframe, it’s fully customizable.
You can style it freely to match your website’s design language — update modals, transitions, or loaders using CSS and JavaScript.

This approach also enables advanced tracking, including:

• Google Analytics 4
• Hotjar
• Microsoft Clarity

You can now measure goals and conversions across the full booking flow — from Intake Form submission to successful meeting booking — without the visitor ever leaving your site.

Final Thoughts

Embedding the Apollo Scheduling experience directly into your WordPress/Elementor site provides a seamless, on-brand, and trackable booking process.

While it takes a bit more setup than a simple link, the result is a professional, conversion-optimized solution your users (and analytics) will love. 💪