Integra i tuoi moduli web con Riunioni

Panoramica

Puoi integrare i moduli web del tuo sito con gli inbound router in Apollo, invece di creare da zero un modulo di acquisizione.

L'integrazione dei tuoi moduli web ti consente di raccogliere i dati dei prospect sul tuo sito, pianificando allo stesso tempo le riunioni senza interruzioni tramite i tuoi inbound router in Apollo.

Torna in alto

Guarda l'esperienza del prospect

La panoramica seguente mostra quanto è semplice per un prospect prenotare una riunione con te e il tuo team quando integri i tuoi moduli web con Apollo.

Torna in alto

Prima di iniziare

Gli amministratori di Apollo devono completare Passaggio 1 e Passaggio 2 qui sotto. Contatta l'amministratore del tuo team per configurare queste impostazioni.

Passaggio 3 richiede conoscenze di HTML e di un linguaggio front-end come JavaScript, oltre all'accesso al codice del tuo sito web. Per completare questa configurazione, contatta l'amministratore del tuo team o un altro referente della tua organizzazione che abbia le competenze richieste.

Se scegli di usare l'integrazione con i moduli del sito web, devi creare tu stesso il modulo HTML e integrarlo con un gestore di invio moduli fornito da Apollo.

Torna in alto

Passaggio 1: crea un inbound router

Se non l'hai ancora fatto, crea un inbound router in Apollo.

Il tuo inbound router deve includere tutti i campi che vuoi mappare dal modulo web integrato.

Torna in alto

Passaggio 2: copia lo snippet JS di Apollo e mappa i campi

Dopo aver creato un inbound router, mappa i campi tra il tuo modulo web e Apollo. Poi puoi generare uno snippet JavaScript da aggiungere al tuo sito web.

1. Apri Apollo e vai a Riunioni > Console di amministrazione > Inbound router.
2. Fai clic sull'inbound router che vuoi integrare con il tuo modulo web.

3. Fai clic su Condividi.

4. Fai clic su Integra con il modulo del tuo sito web.

5. Digita i domini in cui si trova il tuo modulo web, quindi premi Enter o Return per salvarli. Non includere / alla fine dei tuoi domini. Puoi aggiungere fino a 5 domini, inclusi i sottodomini. Ricorda di includere tutte le varianti del dominio, come https://apollo.io e https://www.apollo.io, oltre ai domini per gli ambienti di test.

6. Attiva/disattiva Compila automaticamente i campi del modulo per compilare automaticamente i campi con i dati di Apollo quando un prospect aggiunge il proprio indirizzo email al tuo modulo.

7. Attiva/disattiva Nascondi i campi compilati automaticamente per nascondere ai prospect i campi che Apollo compila automaticamente. Quando abiliti questa impostazione, i tuoi prospect vedono solo i campi che devono ancora compilare. Apollo consiglia di abilitare i campi del modulo nascosti per evitare che i prospect si confondano quando Apollo compila automaticamente i campi del modulo.

8. Mappa i campi del tuo router inbound ai campi del tuo modulo web copiando e incollando l'attributo name da ogni input del modulo. Se un campo del router inbound consente ai prospect di selezionare più opzioni, assicurati che il tuo modulo web offra le stesse opzioni. Fai clic su Continua.

9. Apollo genera uno snippet JavaScript da aggiungere al tuo sito web. Fai clic su Copia snippet per aggiungerlo agli appunti, quindi fai clic su Fine.

Salva il tuo snippet e continua al passaggio 3 per creare l'integrazione del tuo modulo web.

Torna all'inizio

Passaggio 3: crea l'integrazione del tuo modulo web

Le sezioni seguenti forniscono gli elementi di base che puoi usare per creare l'integrazione, dall'impostazione del flusso di base per il passaggio delle voci del modulo web alla definizione di opzioni più avanzate.

Torna all'inizio

Aggiungi lo snippet JS al tuo sito web

Aggiungi lo snippet JavaScript generato nel passaggio 2 al codice del tuo sito web.

Nell'esempio seguente, Apollo ha aggiunto lo snippet tra i tag head dell'HTML di un sito web.

Per impostazione predefinita, lo snippet non visualizza nulla.

Lo snippet crea un'API window.ApolloMeetings a cui è possibile accedere da qualsiasi punto dell'app/console. Dovresti usare l'API per gestire l'invio del tuo modulo personalizzato ad Apollo e, se vuoi, per usare opzioni personalizzate.

Torna all'inizio

Integra con il gestore di invio moduli dell'Inbound Router

Dopo aver aggiunto lo snippet JS al tuo sito web, devi acquisire i dati dal tuo modulo web esistente e passare i risultati ad Apollo.

Il modo più semplice per farlo è usare window.ApolloMeetings.submit() senza alcun parametro. Quando non vengono forniti parametri, vengono acquisite le voci del primo elemento modulo nella pagina web. Vengono acquisiti solo gli elementi input con attributi name, e ogni nome input deve corrispondere al nome definito nella mappatura dei campi del modulo. Se invece preferisci fornire manualmente tutti i valori dei campi, consulta la sezione Personalizzazioni avanzate di questo articolo.

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

Ora dovresti riuscire a visualizzare la finestra modale di prenotazione della riunione quando invii il modulo.

Torna all'inizio

(Facoltativo) Personalizza il rendering del widget di prenotazione

Il metodo initWidget, che viene richiamato nello snippet JavaScript fornito, avvia il flusso di pianificazione da Apollo.

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

Questo widget accetta 3 parametri:

• appId: è un ID univoco fornito da Apollo e non può essere modificato. Viene generato insieme allo snippet JavaScript in Apollo.
• schedulingLink: è l'identificatore del tuo inbound router. Viene fornito da Apollo e non può essere modificato.
• domElement: per impostazione predefinita, Apollo esegue il rendering del widget alla fine del tag body. Il widget si apre all'invio del modulo. Se preferisci collegare il widget a un elemento DOM diverso, puoi definirlo qui.

Torna all'inizio

(Facoltativo) Aggiungi integrazioni di moduli di terze parti

Oltre ai tuoi moduli web, puoi anche acquisire dati dagli invii dei moduli web di HubSpot e Marketo sul tuo sito web e passare queste voci ad Apollo. Devi comunque aggiungere lo snippet JS di Apollo al tuo sito web.

HubSpot

Per i moduli HubSpot, aggiungi il seguente snippet al tuo sito web. Quando un utente invia il modulo HubSpot, i dati vengono passati ad Apollo e viene attivato il flusso di pianificazione. I moduli HubSpot inviano un evento chiamato hsFormCallback sull'oggetto window, che contiene i valori del modulo Hubspot integrato nel rispettivo sito web. Un listener per questo evento è collegato all'oggetto 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

Per i moduli Marketo, aggiungi il seguente snippet al tuo sito web. Quando un utente invia il modulo Marketo, i dati vengono passati ad Apollo e il flusso di pianificazione viene attivato. Questo snippet collega la funzione di invio di Apollo al metodo 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;
  });
});

Torna all'inizio

(Facoltativo) Personalizzazioni avanzate

Oltre a usare window.ApolloMeetings.submit() per passare le voci del modulo web ad Apollo, puoi impostare diverse opzioni per personalizzare l'esperienza per te e i tuoi potenziali clienti.

formId (String)

Per impostazione predefinita, Apollo acquisisce le voci dal primo modulo web che appare in una pagina web. Tuttavia, qualsiasi elemento di una pagina web che acquisisce input utente può essere un modulo.

Se hai definito più moduli, formId acquisisce le voci da un modulo specifico. Usa l'attributo id del modulo e aggiungilo in window.ApolloMeetings.submit().

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

map (Boolean) e lead (Object)

Per impostazione predefinita, map è impostato su true, il che significa che Apollo gestisce automaticamente l'estrazione dei dati dal tuo modulo web. Apollo si basa sui tag input all'interno della struttura HTML del tuo modulo per recuperare le informazioni necessarie.

Se scegli di fornire direttamente il tuo oggetto dati, puoi passarlo usando la chiave lead mantenendo l'opzione map impostata su false.

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

closeOnOutside (Boolean)

Il flusso di pianificazione viene fornito tramite una finestra modale pop-up di Apollo. Per impostazione predefinita, se un potenziale cliente fa clic sull'area di sfondo grigia esterna al pop-up, la finestra modale si chiude.

Per modificare questo comportamento, imposta closeOnOutside su true.

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

preventRedirect (Boolean) e onRedirect (Function)

Quando crei un router Inbound in Apollo, puoi scegliere di inviare i potenziali clienti a un URL esterno. Questa opzione impedisce ai potenziali clienti non ideali di prenotare riunioni.

Se il router Inbound usa questa opzione, puoi scegliere di prendere il controllo di tutti i reindirizzamenti URL e inviare i potenziali clienti a un URL diverso. Questo può consentirti di monitorare meglio le metriche o di far passare i potenziali clienti tramite accorciatori di URL.

Per controllare manualmente il reindirizzamento, imposta preventRedirect su true. Poi, implementa un onRedirect callback per gestire la logica di reindirizzamento.

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

onSuccess (Funzione), onError (Funzione), e onRouted (Funzione)

Usa queste 3 funzioni callback per estendere la logica di invio del modulo.

Imposta onSuccess per definire un callback aggiuntivo da chiamare dopo che un prospect ha pianificato correttamente una riunione. Questo non sovrascrive la logica fornita dall'integrazione Apollo.

Se l'inbound router non riesce in qualsiasi punto, Apollo restituisce l'errore specifico nella risposta. Imposta onError per gestire l'errore.

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

Imposta onRouted per chiamare una funzione quando l'inbound router ha determinato il gestore dell'azione applicabile. Questo avviene quando il pulsante Submit form viene cliccato all'interno del tuo modulo, ma prima che il prospect abbia pianificato una riunione con successo o meno.

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

onRouted fornisce dettagli sul fatto che un'azione sia stata raggiunta correttamente nell'inbound router e, in tal caso, quale azione sia stata raggiunta.

Torna in alto