Way to tie form to Drift scheduling functionaltiy?

Our new CMO is wanting revise our "Schedule a Demo" page to include a form b/c they feel that the Drift bot isn't intuitive enough and that people are expecting to see a form.


Besides iframing the drift bot into the page, is there any way to set up an embedded form that can still tie in to the drift scheduling functionality?

Comments

  • edited April 28

    Hi Stephanie (@[email protected])! We have a few instances on our site with an email field that launches a bot on submit. The bot then asks additional questions to finish the flow (ex: https://www.drift.com/testdrive/). Would something like that work for you or are you looking to add all of the questions in one form?

    If just including an email field to launch a bot works, you will need to add the bot interaction ID to your form tag like this:

    <form data-playbook="12345">

    You'll also have to add javascript to launch the bot and set the email for the use attribute.

  • @Jess McCormick what is the JS code to launch the bot?


    I've tried to add the email address attribute from the form fill before based on what I saw here (https://gethelp.drift.com/hc/en-us/articles/360023682173-Passing-User-Attributes-As-Query-Parameters-on-Your-Landing-Pages) but that wasn't working. I wasn't able to get this attribute to read in the URL string on a test when I straight out typed in my email address.

  • edited April 28

    @[email protected] this is the js we use on pages with custom forms to pass the email and launch the bot:

    $(".custom-form").on("submit", function (e) {
     e.preventDefault();
     var playbookId = Number(this.dataset.playbook);
     var email = $(this).find(".email-field")[0].value;
     if (email) {
      window.drift.api.setUserAttributes({ email: email });
      window.drift.api.startInteraction({ interactionId: playbookId });
      emailReceived(email);
     } else {
      window.drift.api.startInteraction({ interactionId: playbookId });
     }
    });
    

    You'll have to update the .custom-form and .email-field classes with whatever classes you use on your form. We have some Dev Docs that are helpful as well if you are trying to do something more custom like this with the widget.


    Adding @jdewolf to this thread as well in case we can help out with any other questions 😄

  • Thanks @Jess McCormick everything looks good here. To walk you through the js:

    1. Prevent the form from submitting
    2. Get the interaction id. That playbook id variable is actually misnamed 😔 (my bad). You can find this in the playbook settings, in the Driftlink section, under "Advanced": https://share.getcloudapp.com/WnuGY5Qo
    3. If the email field is filled out, set that email attribute on the user so the Bot doesn't ask for the user's email again. Helpful tip, add the email capture at the end of the bot flow so the api has time to update the user attribute. You can read more about the widget api here: https://devdocs.drift.com/docs/widget-start

    Let us know how you make out and if there's anything we can do to help!

This discussion has been closed.