Intégrez vos formulaires web aux réunions.

Aperçu.

Vous pouvez intégrer des formulaires web provenant de votre propre site web avec __KEEP_0000__.routeurs entrants.Dans Apollo, vous pouvez utiliser des fonctionnalités intégrées plutôt que de créer un formulaire d'inscription à partir de zéro.

L'intégration de vos formulaires web vous permet de collecter les données des prospects directement sur votre site web, tout en programmant facilement des réunions via vos routeurs entrants dans Apollo.

Retour en haut.

Découvrez l'expérience client __KEEP_0000__.

La visite guidée suivante vous montre à quel point il est simple pour un prospect de prendre rendez-vous avec vous et votre équipe lorsque vous intégrez vos formulaires web à __KEEP_0000__ Apollo.

Retour au sommet.

Avant de commencer.

Les administrateurs d'Apollo doivent compléter __KEEP_0000__.Étape 1.et __KEEP_0000__Étape 2.Veuillez consulter les instructions ci-dessous. Contactez l'administrateur de votre équipe pour configurer ces paramètres.

Étape 3.Cela nécessite une connaissance de HTML et d'un langage de développement front-end comme JavaScript, ainsi que l'accès au code source de votre site web. Pour finaliser cette configuration, veuillez contacter l'administrateur de votre équipe ou un autre contact au sein de votre organisation qui possède les compétences requises.

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

Retour en haut.

Étape 1 : Créez un routeur entrant.

Si vous ne l'avez pas déjà fait,Créez un routeur entrant.sur __KEEP_0000__ Apollo.

Votre routeur entrant doit inclure tous les champs que vous souhaitez associer au formulaire web intégré. __KEEP_0000__

Retour au sommet.

Étape 2 : Copiez le fragment de code JS d'Apollo et associez les champs.

Une fois que vous avez créé un routeur entrant, vous devez faire correspondre les champs entre votre formulaire web et Apollo. Ensuite, vous pouvez générer un extrait JavaScript à ajouter à votre site web.

1. Ouvrez Apollo et accédez à __KEEP_0000__.Réunions. > Console d'administration. > Routeur entrant..
2. Cliquez sur le routeur entrant que vous souhaitez intégrer à votre formulaire web.

3. Cliquez.Partager..

4. Cliquez.Intégrez-vous à votre formulaire de site web..

5. Tapez le __KEEP_0000__.domaines.Indiquez où se trouve votre formulaire web, puis appuyez sur __KEEP_0000__.Enterou __KEEP_0000__Returnpour les sauvegarder. N'incluez pas... __KEEP_0000__/à la fin de vos noms de domaine. Vous pouvez ajouter jusqu'à 5 noms de domaine, y compris les sous-domaines. N'oubliez pas d'inclure toutes les variations de domaines, comme __KEEP_0000__.https://apollo.ioet __KEEP_0000__https://www.apollo.ioainsi que les domaines destinés aux environnements de test. __KEEP_0000__

6. __KEEP_0000__Remplissage automatique des champs de formulaire.Pour remplir automatiquement les champs avec les données d'Apollo lorsque un prospect ajoute son adresse e-mail à votre formulaire.

7. Basculer.Masquer les champs préremplis.Pour masquer les champs que Apollo remplit automatiquement pour les prospects. Lorsque vous activez cette option, vos prospects ne voient que les champs qu'ils doivent encore remplir. Apollo recommande d'activer la fonction de masquage des champs pour éviter que vos prospects ne soient confus lorsque Apollo remplit automatiquement les champs du formulaire. __KEEP_0000__

8. Associez les champs de votre routeur entrant aux champs de votre formulaire web en copiant et collant les __KEEP_0000__.namePour chaque champ de formulaire, assurez-vous de récupérer l'attribut correspondant. Si un champ de routage entrant permet aux prospects de sélectionner plusieurs options, veillez à ce que votre formulaire web propose les mêmes options. Cliquez sur __KEEP_0000__.Continuez. __KEEP_0000__.

9. Apollo génère un extrait de code JavaScript que vous devez ajouter à votre site web. Cliquez sur __KEEP_0000__.Copiez le fragment de code.Pour l'ajouter à votre presse-papiers, cliquez ensuite sur... __KEEP_0000__Terminé..

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

Retour en haut.

Étape 3 : Configurez 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, depuis l'établissement du flux initial de transmission des données des formulaires web jusqu'à la définition d'options plus avancées.

Retour en haut.

Ajoutez le fragment de code JS à votre site web.

Ajoutez le fragment de code JavaScript généré dans __KEEP_0000__.Étape 2.à votre code source.

Dans l'exemple suivant, Apollo a inséré ce fragment de code entre les __KEEP_0000__.headLes balises du code source d'un site web.

Par défaut, ce fragment de code ne génère aucun affichage.

Le fragment de code crée une...window.ApolloMeetingsVous pouvez accéder à ces éléments depuis n'importe quel endroit de l'application/de la console. Vous devriez 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-vous au gestionnaire de soumissions de formulaires Inbound Router.

Une fois le fragment de code JS ajouté à votre site web, vous devez collecter les données de votre formulaire web existant et transmettre les résultats à Apollo.

La façon la plus simple de faire cela est d'utiliser __KEEP_0000__.window.ApolloMeetings.submit()Sans aucun paramètre, les données du premier élément de formulaire sur la page web seront collectées. Seuls les éléments de type "input" seront pris en compte. __KEEP_0000__nameLes attributs sont capturés, et chaque nom de champ doit correspondre au nom défini dans la correspondance des champs du formulaire. Si vous préférez saisir manuellement toutes les valeurs des champs, veuillez consulter laPersonnalisations avancées.Cette section de cet article.

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

Vous devriez maintenant pouvoir voir la fenêtre de planification de réunion lorsque vous soumettez le formulaire.

Retour en haut.

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

Les.initWidgetLa méthode, qui est invoquée dans le fragment de code JavaScript fourni, lance le processus de planification depuis Apollo.

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

Ce widget accepte 3 paramètres :

• __KEEP_0000__ appIdCeci est un identifiant unique fourni par Apollo et qui ne peut pas être modifié. Il est généré en même temps que le fragment de code JavaScript dans Apollo.
• lien de planification.C'est l'identifiant de votre routeur entrant. Il est fourni par __KEEP_0000__Apollo__KEEP_0000__ et ne peut pas être modifié.
• domElementPar défaut, Apollo affiche le widget à la fin de votre site web. __KEEP_0000__bodyLa balise. Le widget s'ouvre lors de la soumission du formulaire. Si vous préférez associer le widget à un autre élément, vous pouvez définir ce choix ici.

Retour en haut.

(Facultatif) Ajoutez les intégrations de formulaires de tiers.

En plus de vos propres formulaires web, vous pouvez également collecter des données provenant des formulaires web de HubSpot et de Marketo, présents sur votre site web, et transmettre ces informations à Apollo. Vous devez toujours ajouter le code JS d'Apollo à votre site web.

HubSpot.

Pour les formulaires HubSpot, ajoutez le code suivant à votre site web. Lorsqu'un utilisateur soumet le formulaire HubSpot, les données sont transmises à Apollo et le processus de planification est déclenché. Les formulaires HubSpot déclenchent un événement appelé __KEEP_0000__.hsFormCallbackCet objet, qui se trouve sur la fenêtre, contient les valeurs du formulaire HubSpot intégrés sur le site web correspondant. Un écouteur est associé à cet objet de fenêtre pour surveiller cet événement.

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 le code suivant à votre site web. Lorsqu'un utilisateur soumet le formulaire Marketo, les données sont transmises à Apollo et le processus de planification est déclenché. Ce code associe la fonction de soumission d'Apollo au formulaire. __KEEP_0000__MktoForms2.loadFormmé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 de l'utilisation de __KEEP_0000__.window.ApolloMeetings.submit()Pour transmettre les données des formulaires web à __KEEP_0000__ Apollo, vous pouvez définir plusieurs options afin de personnaliser l'expérience pour vous et vos prospects.

formId (Chaîne de caractères)

Par défaut, Apollo capture les données du premier formulaire web présent sur une page. Cependant, tout élément d'une page web susceptible de recueillir des informations saisies par l'utilisateur peut être considéré comme un formulaire. __KEEP_0000__

Si vous avez plusieurs formulaires définis,formIdIl capture les données saisies dans un formulaire spécifique. Utilisez la __KEEP_0000__.idExtrayez l'attribut du formulaire et ajoutez-le. __KEEP_0000__window.ApolloMeetings.submit().

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

map (booléen)et __KEEP_0000__client potentiel (Objet)

Par défaut,mapest sur le point de...true, ce qui signifie qu'Apollo gère automatiquement l'extraction des données de vos formulaires web. Apollo repose sur __KEEP_0000__.inputUtilisez les balises dans la structure 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 en utilisant __KEEP_0000__.leadtouche, tout en conservant __KEEP_0000__.mapoption définie sur.false.

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

closeOnOutside (Booléen) __KEEP_0000__

Le processus de planification est accessible via une fenêtre modale Apollo. Par défaut, si un prospect clique sur la zone grise en dehors de la fenêtre modale, celle-ci se ferme.

Pour modifier ce comportement, configurez :closeOnOutsideà __KEEP_0000__true.

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

`preventRedirect` (booléen)et __KEEP_0000__onRedirect (Fonction)

Lors de la création d'un routeur entrant dans Apollo, vous pouvez choisir de...envoyer des prospects vers une plateforme URL externe.Cette option permet d'empêcher les prospects qui ne correspondent pas à votre profil de prendre des rendez-vous. __KEEP_0000__

Si le routeur entrant utilise cette option, vous pouvez choisir de prendre le contrôle de toutes les redirections et diriger les prospects vers une autre URL. Cela pourrait vous permettre d'effectuer un suivi des performances plus précis ou de rediriger les prospects via des raccourcisseurs URL.

Pour contrôler manuellement la redirection, veuillez définir :preventRedirectà __KEEP_0000__trueEnsuite, mettez en œuvre une solution personnalisée __KEEP_0000__.onRedirectFonction de rappel 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) __KEEP_0000__, `onError` (Fonction), etonRouted (Fonction)

Utilisez ces 3 fonctions de rappel pour étendre la logique de soumission du formulaire.

Définir.onSuccessPour définir un rappel supplémentaire qui sera exécuté après qu'un prospect ait programmé avec succès un rendez-vous. Cela ne remplace pas la logique fournie par l'intégration Apollo. __KEEP_0000__

Si le routeur entrant rencontre un problème, Apollo renvoie le message d'erreur correspondant. Configurez __KEEP_0000__.onErrorpour gérer l'erreur.

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

Définir.onRoutedpour appeler une fonction lorsque le routeur entrant a déterminé le gestionnaire d'action applicable. Cela se produit lorsque... __KEEP_0000__Submit formUn bouton est cliqué dans votre formulaire, mais avant que le prospect n'ait réussi ou échoué à programmer un rendez-vous.

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

onRoutedFournit des informations précises sur le fait qu'une action ait été correctement exécutée dans le routeur entrant, et, le cas échéant, sur quelle action elle a porté.

Retour en haut.