Integrate Your Web Forms with Meetings

Overview

Apollo enables you to build an integration between the web forms on your own website and the scheduling functionality of its inbound router. Your web forms can serve as a substitute for the intake forms you create when setting up inbound routers.

Continue to collect data from prospects on your website, and then provide them with the ability to easily schedule meetings with your team based on the inbound routers you create in Apollo. This can be accomplished in a single, seamless workflow.

Back to Top

Step 0: Before You Begin

The instructions provided in the Step 1 and Step 2 sections of this article can be completed by an Apollo admin. Technical skills are not required.

The Step 3 instructions require knowledge of HTML and a front-end language like JavaScript, along with access to your website's codebase. If you or your team do not possess those technical skills or access, work with your organization to arrange the necessary help.

Back to Top

Step 1: Create an Inbound Router (or Use an Existing Router)

You will map your web form fields to the fields in an Apollo inbound router. Create (or update) an inbound router that includes all of the fields that you want to map to your web form.

If you have already created an inbound router with the fields you want to map, proceed to Step 2.

If you do not have an inbound router with the desired fields, please refer to Create Inbound Routers for Your Meetings to learn how to create or update inbound routers. Then, return to this article and continue with Step 2.

Back to Top

Step 2: Copy Apollo JS Snippet and Map Fields

With an inbound router created, you can proceed to mapping the fields between your web form and Apollo, and then generating the JavaScript snippet to add to your website.

1. Launch Apollo and click Meetings.
2. Click Inbound routers. Find the inbound router you want to use with your web form, and then click ... > Share.
3. Click the Integrate with your website form tab. Enter the domain(s) where your web form is located, and then press enter on your keyboard to save your domain entries. Apollo does not support trailing slashes, so do not include / at the end of your domains.
   
   You can add up to 5 domains, including subdomains. For example, Apollo integrating web forms on https://app.apollo.io and https://knowledge.apollo.io would occupy 2 of the 5 available domains.
4. Click the Form field autofill toggle if you want Apollo to automatically populate any fields with Apollo data when a user inputs their email address into your form. If you want to see how Apollo's form enrichment works, check out a live example. 
5. Then, click the Hide autofilled form fields toggle if you want to streamline the form filling experience for your prospects. Form shortening hides any fields that Apollo autofills from the end user's view. This means that your prospects will only see and need to fill out the fields for which Apollo does not have data. You need to activate the form field autofill toggle to enable this feature.
    

   Be Mindful

   Apollo recommends that you use the form field autofill feature with caution. If you don't want to alarm a prospect when a field automatically populates with their data, consider enabling the form field autofill and form shortening features together.
   
   Also, for form autofill and shortening to work, your webform must be structured correctly as per HTML semantics. Make sure you have wrapped all inputs within the form element and assigned relevant label tags. You must also ensure that you map your inbound router fields to your web form fields correctly, as per the following step.

6. Next, map your inbound router fields to your web form fields. The inbound router fields are already populated, so you only need to enter the corresponding web form field. If an inbound router field allows a prospect to select from multiple options, you should ensure that your web form provides the same options.
   
   The web form field names entered here must match the field names in your code. If there is an emailaddress field in the code of your web form, enter that full name, not email.
   
   Once you have mapped all your fields, select Continue.
7. Apollo generates the JavaScript snippet to add to your website. Click Copy Code to add it to your clipboard, and then click Done to exit.
   
   If you are building the rest of the integration on your website, keep the code snippet yourself. Otherwise, send it to the personnel that will complete the integration setup.

With your code snippet generated, continue to Step 3.

Back to Top

Step 3: Build Your Web Form Integration

The following sub-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.

Back to Top

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.

Back to Top

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.

Back to Top

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()
}

Back to Top

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;
  });
});

Back to Top

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 false, which means Apollo handles extracting the data from your web form. Apollo relies on input tags in your form's HTML to retrieve this information.

If you prefer to use the Salesforce lead object format, set map to true. Then, define lead per the following code example so that the correct data is passed to Apollo.

window.ApolloMeetings.submit({
    map: true, 
    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 unsuccessfully 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;

Back to Top