Integrate Your Web Forms with Meetings

Overview

You can integrate web forms from your own website with inbound routers in Apollo, rather than building an intake form from scratch.

Integrating your web forms enables you to collect prospect data on your own website while seamlessly scheduling meetings via your inbound routers in Apollo.

Before You Begin

Apollo admins need to complete Step 1 and Step 2 below. Reach out to your team's admin to configure these settings.

Step 3 requires knowledge of HTML and a front-end language like JavaScript, along with access to your corporate website's codebase. To complete this setup, reach out to your team's admin user or another point of contact in your organization who has the required skill sets.

Step 1: Create an Inbound Router

If you haven't already, create an inbound router in Apollo.

Your inbound router should include all the fields you want to map from your integrated web form.

Step 2: Copy Apollo JS Snippet and Map Fields

Once you create an inbound router, map fields between your web form and Apollo. Then, you can generate a JavaScript snippet to add to your website.

Launch Apollo and go to Meetings > Admin console > Inbound router.
Click the inbound router you want to integrate with your web form.

Click Share.

Click Integrate with your website form.

Type the domains where your web form is located, then press Enter or Return to save them. Don't include / at the end of your domains. You can add up to 5 domains, including subdomains.

Toggle Auto fill form fields to populate fields automatically with Apollo data when a prospect adds their email address to your form.

Try It Out!

Hop into this article to test how Apollo auto-fills your form when a prospect enters their email.

Toggle Hide auto-filled fields to hide fields that Apollo autofills from prospects. When you enable this setting, your prospects only see the fields they still need to fill out. Apollo recommends enabling hidden form fields to keep your prospects from being confused when Apollo auto-fills form fields.

Web Form Enrichment Troubleshooting

Have additional questions about form enrichment settings? Check out this article to learn more.

Map your inbound router fields to your web form fields. If an inbound router field allows prospects to select multiple options, make sure that your web form provides the same options. Click Continue.

Mapping Matters

Map all fields to ensure Apollo routes your prospects correctly. The field names you provide need to match your web form field names exactly. For example, if your web form uses the field name email address, use the full name instead of email when setting up your router.

In addition, make sure to format your web form's HTML properly. Wrap all inputs within the form element and assign relevent label tags.

Apollo generates a JavaScript snippet to add to your website. Click Copy code snippet to add it to your clipboard, and then click Done.

Save your code snippet and continue to Step 3 to build your web form integration.

Step 3: Build Your Web Form Integration

Find Your Snippet!

You need the code snippet from Step 2 to build your web form integration. If you don't have this snippet, follow the instructions in Step 2 to generate it before updating your website.

The following sections provide the building blocks that you can use to build your integration, from establishing the basic flow of passing the web form entries to defining more advanced options.

Add the JS Snippet to Your Website

Add the JavaScript snippet generated in Step 2 to your website's code.

In the following example, Apollo added the snippet between the head tags of a website's HTML.

The snippet creates a window.ApolloMeetings object that can be accessed from anywhere in the app/console. You should use this object to both pass web form entries to Apollo and, if you choose, to utilize custom options.

Customize initWidget

The initWidget initiates the scheduling flow from Apollo. Access it via the window.ApolloMeetings object.


initWidget: ({ appId: string, schedulingLink: string, domElement?: HTMLElement }) = void;

This widget includes 3 elements:

appId: This is a unique ID that is generated along with the JavaScript snippet in Apollo.
schedulingLink: An identifier for your inbound router.
domElement: By default, Apollo adds the widget at the end of your website's body tag. If you prefer to open the widget on a different element, you can define that choice here.

Pass Web Form Submissions Data to Apollo

With Apollo's JS snippet added to your website, you need to capture the data from your web form's submissions and pass the entries to Apollo.

The easiest way to pass the entries is to use window.ApolloMeetings.submit() without defining any options. By default, this option captures entries from the first form element on a webpage and passes them to Apollo via an API call. Only input elements with name attributes are captured.


const handleFormSubmit = () = {
    window.ApolloMeetings.submit()
}

Add Third-party Form Integrations

In addition to your own web forms, you can also capture data from HubSpot and Marketo web form submissions on your website and pass those entries to Apollo. You still need to add Apollo's JS snippet to your website.

HubSpot

For HubSpot forms, add the following snippet to your website. When a user submits the HubSpot form, the data is passed to Apollo and the scheduling flow is triggered. Hubspot forms dispatch an event called hsFormCallback on the window object, which has the values of the Hubspot form integrated on the respective website. A listener to this event is attached to the window object.


window.addEventListener("message", function(event) {
  if (event.data.type === "hsFormCallback" && event.data.eventName === "onFormSubmitted") {
    const lead = event.data.data.submissionValues;
    window.ApolloMeetings.submit({
      map: false,
      lead
    });
  }
});

Marketo

For Marketo forms, add the following snippet to your website. When a user submits the Marketo form, the data is passed to Apollo and the scheduling flow is triggered. This snippet attaches Apollo's submit function to the MktoForms2.loadForm method.


MktoForms2.loadForm(BASE_URL, MUNCHKIN_ID, FORM_ID, function(form) {
  form.onSuccess(function(values) {
    window.ApolloMeetings.submit({
      map: false,
      lead: values
    });
    return false;
  });
});

Define Options

In addition to using window.ApolloMeetings.submit() to pass web form entires to Apollo, you can set several options to improve the experience for you and your prospects.

formId (String)

By default, Apollo captures entries from the first web form to appear on a webpage. Any element of a webpage that captures user input could be a form though.

Use formId to capture entries from a specific form. Use the id attribute from the form and add it in window.ApolloMeetings.submit().


const handleFormSubmit = (e) = {
    e.preventDefault();
    // myForm is the id attribute for the form.
    window.ApolloMeetings.submit({formId : "myForm"});
};

map (Boolean) and lead (Object)

By default, map is set to true, which means Apollo automatically manages the extraction of data from your web form. Apollo relies on input tags within your form's HTML structure to retrieve the necessary information. Additionally, if you provide a formId in the submit function, Apollo locates and uses the specified form. If the specified form is not found, Apollo will attempt to locate the first form tag on your page and utilize the input fields from there.

If you choose to provide your data object directly, you can pass it using the lead key while keeping the map option set to false.


window.ApolloMeetings.submit({
    map: false, 
    lead : {name: state.name, email: state.email}
});

closeOnOutside (Boolean)

The scheduling flow is delivered via an Apollo pop-up window. By default, a prospect clicking the gray background area outside the pop-up closes the window.

To change this behavior, set closeOnOutside to true.


window.ApolloMeetings.submit({
    closeOnOutside : true
});

preventRedirect (Boolean) and onRedirect (String)

When creating an inbound router in Apollo, you can choose to send prospects to an external URL. This option prevents non-ideal prospects from booking meetings.

If the inbound router uses this option, you can choose to take control of all the URL redirects and send prospects to a different URL. This could enable you to perform better metric tracking or to pass prospects through URL shorteners.

If you want to change the redirect, set preventRedirect to false. Then, set onRedirect to the desired URL.


window.ApolloMeetings.submit({
    preventRedirect: false,
    // Enter the URL you want to use for the redirect.
    onRedirect :(url) = {https://www.replacethisurl.com}
});

onSuccess (Function), onError (Function), and onRouted (Function)

Use these 3 callback functions to determine what happens after a prospect has submitted a web form.

Set onSuccess to define what happens after a prospect has successfully scheduled a meeting.

If the inbound router fails at any point, Apollo delivers the specific error in response. Set onError to guide the prospect after the error.


window.ApolloMeetings.submit({
    // Define your error function.
    onError : (error) = {},
    // Define your success function.
    onSuccess: () = {}
})

Set onRouted to call a function when the inbound router has been triggered. This occurs after the web form is submitted, but before the prospect has either successfully or unsuccessfuly scheduled a meeting.


window.ApolloMeetings.submit({
    onRouted : (result) = {
        if(result.success) {
            // routing success
            // get what type of routing happeneded from 
            const type = result.type
        } else {
            // routing failure, see error in result.error
            const error = result.error
        }
    }
})

onRouter provides details about both whether an action was successfully reached in the inbound router and, if so, which action was reached.


onRouted?: 
    ( params: | { success: false; error: string } | 
        { success: true; type: 'custom_message' | 'book_meeting' | 'redirect_to_url' }, ) = void;