Switch Playbooks On Button-Click

Overview

Drift experiences rely heavily on conditional branching, visitor data, as well as input from the customer as they branch throughout different journeys. Sometimes, you need to capture enough information from the customer to determine which experience is correct to show, and then initiate a new Drift Playbook once visitors have reached a certain step in the experience flow.

Listen for Drift Button-Clicked Event

To begin, you can use our existing documentation about receiving information from Drift in order to create an event listener for your desired Drift button-click event. Make sure to copy and paste the text of the button from the Drift playbook flow-builder UI into your JavaScript exactly as this text needs to match when using the '==' operators.

window.drift.on("conversation:buttonClicked", function(data) {
  console.log("user clicked a button with text: " + data.buttonBody);
});

Start a Chat Programmatically

Once the visitor has clicked your button of choice in the first playbook you are offering, you can then use our method of programmatically initiating a chat with the startInteraction method. This requires you to create a second playbook, then use the interactionId from this playbook when your buttonBody matches the desired text.

window.drift.api.startInteraction({
    interactionId: 12345, //(number, required) The interaction ID tied to the playbook to be fired,
  goToConversation: true, //(boolean, default: true) Determines if the playbook should auto-expand the chat when fired. Set this to false if you want the playbook to show a preview message instead of popping it open.
  replaceActiveConversation: true //(boolean, default: true) Determines if the playbook should replace an already existing conversation. Set to false if you do not want the playbook fired over an existing conversation.
});

Putting It All Together

As you will see in the code from the previous step about starting a chat programmatically, the default behavior is for the new conversation to open and replace the existing, active conversation. Because of this, we can implement simpler code when we add this snippet to the browser on pageload.

window.drift.on("conversation:buttonClicked", function(data) {
    console.log(data);
    if (data.buttonBody == "Switch the Playbook Now!") { //* <-- playbook 1 button-text here */
      drift.api.startInteraction({ interactionId: 123456 }); //* <-- playbook 2 interaction ID here */
    };
  });

Implementation In Production

To make this code go live, update your default installation of Drift so that this snippet fires as a separate tag immediately after your default Drift JavaScript snippet has been loaded to the page. In platforms like Google Tag Manager, this means this code can be fired as a cleanup-Tag behind the main Drift script. If you are manually installing JavaScript to your HTML files, you should add this snippet to the Body or the Footer, where Drift's main code is normally loaded to the Head so it is available to avoid race conditions with this customization.