๐ŸŽ‰ 1Flow is proudly backed by Y Combinator.
logo

Get Started

You can embed our Javascript SDK into any website or web application using Google Tag Manager. Users of Google Tag Manager can quickly setup 1Flow without making code updates.

Install Tag on a Website

To launch 1Flow surveys and messaging on your website with Google Tag Manager, please follow these steps:
  1. Navigate to the Google Tag Manager container which is installed on your website
  1. Click on โ€œNewโ€ button to create a new tag
  1. Name your new tag โ€œ1Flow - Installโ€
  1. Click on Tag Configuration and choose Custom HTML
  1. Paste your 1Flow JavaScript snippet
  1. Fill in the snippet api key with your 1Flow project api key. You can find this in settings > project > api keys
  1. Check the box next to Support document.write
  1. Set the trigger for the Refiner snippet to โ€œInitialization - All Pagesโ€
  1. Publish your changes to the workspace
html
<!-- 1Flow Tracking Script --> <script> const apiKey = 'your-project-api-key'; // TODO: replace this with your api key (function(w,o,s,t,k,a,r){ w._1flow= function (e,d,v){ s(function(){w._1flow(e,d,(!v)?{}:v)},500)}, a=o.getElementsByTagName('head')[0]; r=o.createElement('script');r.async=1; r.setAttribute('data-api-key',k) r.src=t; a.appendChild(r); })(window,document,setTimeout,'https://1flow.app/js/1flow.js', apiKey); </script> <!-- End of 1Flow Tracking Script -->
Congratulations! You have successfully set up 1Flow in Anonymous Mode, ready to launch website surveys for anonymous traffic.
Image without caption

Install Tag on a Web App

If you want to launch surveys and messaging for logged-in users, you also need to identify the user by passing their user IDs along with other user traits to 1Flow.
Identifying users unlocks many features of 1Flow, such as user cohorts, customer 365 profiles, and more data integrations.

Create variables for your user data

First, make sure all user data fields you want to send to 1Flow are available as variables in Google Tag Manager.
Go to Variables in your GTM account and add โ€œUser-Defined Variablesโ€ based on your needs.
At a minimum, you want to have a variable userId for the User ID used to identify users. Other useful fields might include:
  • email
  • phone
  • plan
  • company
  • revenue
This list is just an example and you are not required to have these fields configured.
Image without caption

Identify users and updating user traits

Once user data is defined with variables, you can identify users passing in these traits.
  1. Create a new tag and name it โ€œ1Flow - Identifyโ€
  1. Click on Tag Configuration and choose Custom HTML
  1. Paste your 1Flow JavaScript snippet for identifying users
  1. Fill in the userId with the variable representing user ID (in GTM, you can refer to variables by wrapping variable names in {{VARIABLE}} - start typing {{ into the script field, and you should see autocomplete menu showing up)
  1. Optional - Fill in the user traits you would like to pass in along with each user, by referring to the variables created before
  1. For triggering, select โ€œAll Pages - Page Viewโ€
  1. Publish your changes to the workspace
html
<script> window._1flow('identify', {{userId}}, { "email": {{Email}}, "company": {{Company}} }) // user traits are optional </script>
Image without caption

Track Custom Events

1Flowโ€™s automatic page rule targeting is great, but sometimes you may want to track custom events and use them to build your audience rules, or use specific events as triggers to a survey.
You can track 1Flow events using Google Tag Manager by following these steps:
  1. Create a new tag and name it โ€œ1Flow - Trackโ€
  1. Click on Tag Configuration and choose Custom HTML
  1. Paste your 1Flow JavaScript snippet for tracking events
  1. Name your event, and optionally pass in variables as event properties by referencing GTM variables {{VARIABLE}} (for example, "plan": {{Plan Name}} if you have already set up a GTM variable named โ€œPlan Nameโ€ and want to pass in this value to the event)
  1. Configure the triggering condition according to when this event should be triggered
  1. Publish your changes to the workspace
html
<script> window._1flow('track', 'Event Name', { "amount": {{Amount}} }); </script>
Image without caption

Helpful?