As a growth marketer and customer journey architect, I seek out great tools and configure them in ways that help to make it easier to create personalized customer journeys with the goal of getting higher conversions from these customers.

Doing so can be easier said than done, especially when you don’t have access to the right customer data to segment your customer base.  So here’s a playbook that will show you how to capture that data so you can use it later on for segmentation and personalization.

This playbook leverages a number of awesome tools: Appcues, Typeform and Segment.  It may sound like a lot, but if you’re constrained because your developers are already overloaded with work, this can allow you to move forward without getting your dev team involved.

I was presented with this same quandary recently, while working with one of my Customer Journey Optimization clients.  As users of my client’s platform had different interests, I wanted to make sure I presented offers and feature-based flows that were pertinent to them.  So that required me to present a Survey after the login to capture their interests. And as always, I wanted to do this without having to bother the developer too much.  As you can probably relate, most companies are suffering from the same problem – the developer bottleneck – where most initiatives need developer time and must compete with all other initiatives.  And my client was no different in this instance!

So I turned to a little-known feature within Appcues – the ability to embed a Typeform survey in an Appcues modal.

Step 1: Typeform

Let’s start our tutorial in Typeform.  When you create a new typeform survey, typeform presents a bunch of great templates you can choose from.  For these purposes, I’m going to choose the Demographic Survey template. It asks questions like Gender, Country, and Annual Income.  Of course, if your audience is comprised of businesses instead of consumers, your survey may ask a whole set of different questions, like Company Size, Industry etc.

I need to make one more change to this survey.  I need to add Hidden Fields to my survey. Note: this will require a paid Typeform account.  In the “Create” tab of your survey, choose the Hidden Fields block and then enter the following fields, like so:

I decided to make a few changes to the text on the Welcome screen and then grab the embed code from the Share tab in Typeform.  Make sure to switch to the “Full page” section on this tab and then click the “Get the code” button.

Next, we need to make sure to rename all the question field names from the default values that Typeform sets, to the value that makes sense to us.  For each question, go to the settings and set this value in the “Question reference” box.

Step 2: Appcues

Now I’ve got the code to embed my form, I’m ready to embed it into my Appcues modal.  If you’re not familiar with Appcues, it enables you to design and configure pop ups and walkthroughs in your app without any coding.

Switching over to Appcues, when editing my modal, I want to add a HTML element and paste in the embed code from Typeform.

Once this is done, feel free to preview your modal, and you should see the typeform embedded in the modal.  Because we’re still testing make sure to set the targeting in Appcues to just yourself for the moment. I would also set it to show every time, just until I’m finished testing.

I prefer not to have any additional buttons in the modal, so I go to the modal options and set the Next button to Hidden.

Once, that’s done, publish the modal and see the modal show up on your site.

Now we need to make sure that we pass the User variables through to the Typeform survey.  To do this, we need to add some text into the embed code.

Look for where the code shows the Typeform URL which should look like this:

src=”https://funnelventures.typeform.com/to/JptRNs”

We need to add some parameters at the end of this URL, like this, don’t forget the “?” in between the URL and the parameters:

src=”https://funnelventures.typeform.com/to/JptRNs?email=xxxxx&user_id=xxxxx&events=both”

You will need to replace the “xxxxx” values with variables that are available from your app.  When implementing Segment for example, the identify call would be embedded in your front end code to send this data to Segment, so you can copy the variable syntax from that.  If you are not able to find this, you should talk to your Developer to get help on that.

The events parameter is used to instruct our segment code whether to send the identify call (identify), track call (track) or both the identify and track calls (both).  Which option you choose here depends on where you want to see the data showing up in your end tools.  Feel free to test out all options to see how they show up in your tools.

Finally, let’s test out your Survey by completing a full survey response.  You want to make sure that the survey link you put into your browser includes the URL parameters at the end of it, and for this survey, replace the variable values with hard-coded values, like this:

https://funnelventures.typeform.com/to/[email protected]&user_id=45677&events=both

Don’t forget to go back to your Appcues modal and change the targeting rules from just being displayed to you, to being displayed all users (or a subset if that makes sense to your business).

Step 3: Add Customer Segment Source for Typeform

The next step is to capture the results after a User has completed the survey and push that back into Appcues (or other places if you so wish).  This will make it possible for us to use that data for triggering the right Appcues flow.

To push the completed survey from Tyepform to Appcues, we use Segment.  Whilst Segment has a slew of available sources that come out of the box, Typeform isn’t one of them, so we can make use of a great new Segment feature that’s currently in beta, and that’s the ability to create your own custom source.

Once you’ve created the custom source in Segment, copy the webhook URL from Step 2 below.

Then back in Typeform, go to the Connect tab of your form, under the Webhooks section.  Click “Add a Webhook” and then paste the webhook URL you copied from Segment in the Endpoint field and save changes.

Head back to Segment, we’re now going to create our custom source.  Under Step 1 in the Custom Source, there’s an “Edit Function” button.  Paste the following code over the existing code there.  Then click the “Save and Deploy” button.

// 1. Access your event body, headers and query parameters through the event object
// 2. Transform the event into Segment Identify & Tracking Events

// Typeform: Online form building and online surveys
// Use case: When a form or survey is filled out, capture that information to send through to Segment to trigger other actions
// Mandatory typeform hidden fields: email, user_id & events (values: identify, track, both) 

exports.processEvents = async (event) => {
  let eventBody = event.payload.body;
  let eventHeaders = event.payload.headers;
  let queryParameters = event.payload.queryParameters;
  let returnValue = {
    events: []
  }

  const formResponse = eventBody.form_response;
  var the_user_id;
  var the_email;
  var events;
  var trackResponse;
  var identifyResponse;
  
  answers = {}
  for (var i=0; i 
Here’s a diagram to represent what we want to achieve:

As you can see in the diagram above, once a survey is completed, we will use Segment to send this data to Appcues.  To make sure Segment sends this data to Appcues, in Segment be sure to add the AppCues destination to the Typeform Custom Source.
For Appcues, you want to make sure your “events” parameter is set to “identify” or “both” to make sure a Segment identify call is sent through so you can do subsequent targeting based on the survey responses.  For use in other tools, it may be better to capture this at the track level, it’s best to test out each option based on your tools and needs.
Testing it Out
Now that you’ve set this up, it’s time to test it out.
Go to your app which should show your Survey modal.  Complete the Survey. To make sure the data is flowing, check the task history in your Zap.
Once you’ve done that you should have this data flowing into Appcues.  So now that this data is flowing through, you can create various additional modals in Appcues and set up targeting like so, which would target the modal for anyone under the age of 35:

And that’s how you can capture extra information about your users so you can supercharge your modal targeting and present more customized journeys.
The post Supercharging your Modal Targeting appeared first on Funnel Ventures.