Intégrez vos formulaires web à Meetings

Aperçu

Vous pouvez intégrer les formulaires web de votre propre site web avec des inbound routers dans Apollo, plutôt que de créer un formulaire d'admission de zéro.

L'intégration de vos formulaires web vous permet de collecter des données de prospects sur votre propre site web tout en planifiant facilement des réunions via vos inbound routers dans Apollo.

Retour en haut

Voir l'expérience prospect

La visite suivante montre à quel point il est simple pour un prospect de réserver une réunion avec vous et votre équipe lorsque vous intégrez vos formulaires web à Apollo.

Retour en haut

Avant de commencer

Les administrateurs Apollo doivent effectuer l'Étape 1 et l'Étape 2 ci-dessous. Contactez l'administrateur de votre équipe pour configurer ces paramètres.

Étape 3 nécessite des connaissances en HTML et dans un langage front-end comme JavaScript, ainsi qu'un accès au code source de votre site web. Pour terminer cette configuration, contactez l'administrateur de votre équipe ou un autre point de contact de votre organisation disposant des compétences requises.

Si vous choisissez d'utiliser l'intégration de formulaires de site web, vous devez créer vous-même le formulaire HTML et l'intégrer avec un gestionnaire d'envoi de formulaire fourni par Apollo.

Retour en haut

Étape 1 : Créer un Inbound Router

Si ce n'est pas déjà fait, créez un inbound router dans Apollo.

Votre inbound router doit inclure tous les champs que vous souhaitez mapper depuis votre formulaire web intégré.

Retour en haut

Étape 2 : Copier l'extrait de code JS Apollo et mapper les champs

Une fois l'inbound router créé, mappez les champs entre votre formulaire web et Apollo. Vous pourrez ensuite générer un extrait JavaScript à ajouter à votre site web.

1. Ouvrez Apollo et accédez à Réunions > Console d'administration > Inbound router.
2. Cliquez sur l'inbound router que vous souhaitez intégrer à votre formulaire web.

3. Cliquez sur Partager.

4. Cliquez sur Intégrer à votre formulaire de site web.

5. Saisissez les domaines où se trouve votre formulaire web, puis appuyez sur Enter ou Return pour les enregistrer. N'incluez pas / à la fin de vos domaines. Vous pouvez ajouter jusqu'à 5 domaines, y compris les sous-domaines. N'oubliez pas d'inclure toutes les variantes de domaine, comme https://apollo.io et https://www.apollo.io, ainsi que les domaines des environnements de test.

6. Activez ou désactivez Remplir automatiquement les champs du formulaire pour remplir automatiquement les champs avec les données Apollo lorsqu'un prospect ajoute son adresse Email à votre formulaire.

7. Activez ou désactivez Masquer les champs remplis automatiquement pour masquer aux prospects les champs qu'Apollo remplit automatiquement. Lorsque vous activez ce paramètre, vos prospects ne voient que les champs qu'ils doivent encore remplir. Apollo recommande d'activer les champs de formulaire masqués afin d'éviter toute confusion lorsque les champs du formulaire sont remplis automatiquement.

8. Mappez les champs de votre routeur Inbound aux champs de votre formulaire web en copiant et collant l'attribut name de chaque champ de saisie du formulaire. Si un champ du routeur Inbound permet aux prospects de sélectionner plusieurs options, assurez-vous que votre formulaire web propose les mêmes options. Cliquez sur Continuer.

9. Apollo génère un extrait de code JavaScript à ajouter à votre site web. Cliquez sur Copier l'extrait de code pour l'ajouter à votre presse-papiers, puis cliquez sur Terminé.

Enregistrez votre extrait de code et passez à l'étape 3 pour créer l'intégration de votre formulaire web.

Retour en haut

Étape 3 : Créez l'intégration de votre formulaire web

Les sections suivantes présentent les éléments de base que vous pouvez utiliser pour créer votre intégration, de la mise en place du flux de base pour transmettre les entrées du formulaire web à la définition d'options plus avancées.

Retour en haut

Ajoutez l'extrait JS à votre site web

Ajoutez l'extrait JavaScript généré à l'étape 2 au code de votre site web.

Dans l'exemple suivant, Apollo a ajouté l'extrait entre les balises head du HTML d'un site web.

L'extrait n'affiche rien par défaut.

L'extrait crée une API window.ApolloMeetings à laquelle il est possible d'accéder depuis n'importe où dans l'application/console. Vous devez utiliser l'API pour gérer l'envoi de votre formulaire personnalisé à Apollo et, si vous le souhaitez, pour utiliser des options personnalisées.

Retour en haut

Intégrez le gestionnaire d'envoi de formulaire Inbound Router

Une fois l'extrait JS ajouté à votre site web, vous devez capturer les données de votre formulaire web existant et transmettre les résultats à Apollo.

Le moyen le plus simple de le faire est d'utiliser window.ApolloMeetings.submit() sans aucun paramètre. Lorsqu'aucun paramètre n'est fourni, les entrées du premier élément de formulaire de la page web sont capturées. Seuls les éléments input avec des attributs name sont capturés, et chaque nom d'entrée doit correspondre au nom défini dans le mapping des champs du formulaire. Si vous préférez fournir manuellement toutes les valeurs de champ, consultez la section Personnalisations avancées de cet article.

<form onsubmit="window.ApolloMeetings.submit(); return false">

Vous devriez maintenant voir la fenêtre modale de réservation de réunion lors de l'envoi du formulaire.

Retour en haut

(Facultatif) Personnalisez le rendu du widget de réservation

La méthode initWidget, appelée dans l'extrait JavaScript fourni, lance le flux de planification depuis Apollo.

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

Ce widget accepte 3 paramètres :

• appId : il s'agit d'un ID unique fourni par Apollo et qui ne peut pas être modifié. Il est généré avec l'extrait JavaScript dans Apollo.
• schedulingLink : il s'agit de l'identifiant de votre Inbound Router. Il est fourni par Apollo et ne peut pas être modifié.
• domElement : par défaut, Apollo affiche le widget à la fin de la balise body de votre site web. Le widget s'ouvre lors de l'envoi du formulaire. Si vous préférez associer le widget à un autre élément DOM, vous pouvez définir ce choix ici.

Retour en haut

(Facultatif) Ajoutez des intégrations de formulaires tiers

En plus de vos propres formulaires web, vous pouvez également capturer les données des envois de formulaires web HubSpot et Marketo sur votre site web et transmettre ces entrées à Apollo. Vous devez toujours ajouter l'extrait JS d'Apollo à votre site web.

HubSpot

Pour les formulaires HubSpot, ajoutez l'extrait suivant à votre site web. Lorsqu'un utilisateur envoie le formulaire HubSpot, les données sont transmises à Apollo et le flux de planification est déclenché. Les formulaires HubSpot déclenchent un événement appelé hsFormCallback sur l'objet window, qui contient les valeurs du formulaire Hubspot intégré au site web correspondant. Un listener de cet événement est attaché à l'objet window.

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

Pour les formulaires Marketo, ajoutez l'extrait de code suivant à votre site web. Lorsqu'un utilisateur envoie le formulaire Marketo, les données sont transmises à Apollo et le flux de planification est déclenché. Cet extrait de code attache la fonction d'envoi d'Apollo à la MktoForms2.loadForm méthode.

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

Retour en haut

(Facultatif) Personnalisations avancées

En plus d'utiliser window.ApolloMeetings.submit() pour transmettre les entrées du formulaire web à Apollo, vous pouvez définir plusieurs options pour personnaliser l'expérience pour vous et vos prospects.

formId (String)

Par défaut, Apollo capture les entrées du premier formulaire web qui apparaît sur une page web. Cependant, tout élément d'une page web qui capture des données saisies par l'utilisateur peut être un formulaire.

Si plusieurs formulaires sont définis, formId capture les entrées d'un formulaire spécifique. Utilisez l'attribut id du formulaire et ajoutez-le dans window.ApolloMeetings.submit().

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

map (Boolean) et lead (Object)

Par défaut, map est défini sur true, ce qui signifie qu'Apollo gère automatiquement l'extraction des données de votre formulaire web. Apollo s'appuie sur les balises input dans la structure HTML de votre formulaire pour récupérer les informations nécessaires.

Si vous choisissez de fournir directement votre objet de données, vous pouvez le transmettre à l'aide de la clé lead tout en conservant l'option map définie sur false.

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

closeOnOutside (Boolean)

Le flux de planification est proposé via une fenêtre modale pop-up Apollo. Par défaut, lorsqu'un prospect clique sur la zone de fond grise en dehors de la fenêtre pop-up, la fenêtre modale se ferme.

Pour modifier ce comportement, définissez closeOnOutside sur true.

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

preventRedirect (Boolean) et onRedirect (Function)

Lors de la création d'un routeur Inbound dans Apollo, vous pouvez choisir de envoyer les prospects vers une URL externe.

Si le routeur Inbound utilise cette option, vous pouvez choisir de prendre le contrôle de toutes les redirections d'URL et d'envoyer les prospects vers une autre URL. Cela peut vous permettre d'effectuer un meilleur suivi des métriques ou de faire passer les prospects par des raccourcisseurs d'URL.

Pour contrôler manuellement la redirection, définissez preventRedirect sur true. Ensuite, implémentez un(e) onRedirect callback pour gérer la logique de redirection.

window.ApolloMeetings.submit({
    preventRedirect: true,
    onRedirect: (url) => {
      // You can add custom logic here (such as analytics).
      window.location.href = 'https://www.replacethisurl.com';
    }
});

onSuccess (Fonction), onError (Fonction), et onRouted (Fonction)

Utilisez ces 3 fonctions callback pour étendre la logique d’envoi du formulaire.

Définissez onSuccess pour définir un callback supplémentaire à appeler après qu’un prospect a planifié une réunion avec succès. Cela ne remplace pas la logique fournie par l’intégration Apollo.

Si l’inbound router échoue à un moment quelconque, Apollo renvoie l’erreur spécifique dans la réponse. Définissez onError pour gérer l’erreur.

window.ApolloMeetings.submit({
    onError: (error) => {
      // Define your additional custom error handler.
    },
    onSuccess: () => {
      // Define your additional success handler.
    }
})

Définissez onRouted pour appeler une fonction lorsque l’inbound router a déterminé le gestionnaire d’action applicable. Cela se produit lorsque le bouton Submit form est cliqué dans votre formulaire, mais avant que le prospect ait planifié une réunion avec succès ou non.

window.ApolloMeetings.submit({
    onRouted: (result) => {
      // Implement your custom logic here (such as analytics).
    }
})

onRouted fournit des détails indiquant si une action a bien été atteinte dans l’inbound router et, le cas échéant, quelle action a été atteinte.

Retour en haut