Powered by GrowthLoop Embed

Learn how to embed GrowthLoop audience building into your application

In this article, you will learn how to embed GrowthLoop's audience builder into an internal application or system. You can also embed our composable audience builder directly into your CRM.

Audience Builder iFrame Embed

This iFrame component enables you to embed GrowthLoop’s fully functional audience builder into your web application including audience inclusions, exclusions, user filters, transaction filtering, and more. You can configure what type of Audience Builder you would like to display that works for your user interface. Below is a compact version and an expanded version.

<https://app.flywheelsoftware.com/embed?team_id=203&organization_id=190&embed_path=%2Faudiences%2Fnew&>...

(see the Authentication section for full parameters)

/embed?organization_id=\<ORGANIZATION_ID>&team_id=\<TEAM_ID>7embed_path=%2Faudiences%2Fnew&...

Exports Embed

The embed brings GrowthLoop’s destination sync into your application. Users can choose to export an audience. Users can select a destination that has been connected to the platform (50+ available). Users can then configure the frequency of how often they want their audience to sync to the destination platform.

Destination Export Configuration

The embed enables your end users to configure their export to the Destination for their audience.

embed destination configuration

👍

Once they click export the audience sync will begin to their destination all from your interface :white-check-mark:

Audience List

You can embed our Audience List page in your interface or use our API to get a list of audiences and bring it into whatever UI you would like to use.

Audience List Embed

Embed our Audience List directly in your interface with this iFrame path:

<https://app.flywheelsoftware.com/embed?team_id=203&organization_id=190&embed_path=%2Faudiences>...

Audience List API

You can list all audiences for a specific team and organization with metadata via GrowthLoop’s API. Here is an example user interface built with the API data that is returned.

https://docs.growthloop.com/reference/get_api-public-audiences

<https://api.prod.flywheelproducts.com/audiences>

Shared Data Layer

GrowthLoop writes all audiences and journey states to your Warehouse so you have full access. Here is a summary of the underlying data schemas.

snapshotting_audience_{id} _snapshot_history Stores all the snapshots for the audience in the table

snapshotting_audience_{id} _delta_history History of all the adds/removes for an ongoing audience sync. Along with the control/treatment assignment.

snapshotting_audience_{id} _metadata Audit log of each run of audience snapshotting.

Administrative Support for Embed

Setting up Datasets for audience building (Help Center)

  1. Support Admins can log in to app.flywheelsoftware.com
  2. Admin can switch to Org and Team they want to set up destinations for.
  3. Admin clicks Datasets menu tab
  4. Admin can configure datasets for audience building.
  5. Admin can view all datasets set up for that org.

Setting up Destinations (Help Center)

  1. Support Admins for your organization can log in to app.flywheelsoftware.com
  2. Admin can switch to Org and Team they want to set up destinations for.
  3. Admin clicks Destinations menu tab
  4. Admin can set up destinations for customers leveraging customer credentials.
  5. Admin can view all destinations set up for that organization.

Managing Orgs and Teams (Help Center)

Support Admins can quickly switch between different orgs and teams they are attached to.

On the Organization tab Support Admins can manage which users are associated with each team. Support Admins can also create new teams for the organization and assign users.

Creating a new Organization

On the Manage tab, Support Admins can view all organizations they have set up and are a part of (your customers).
We are adding support for Support Admins to directly create a new Organization directly from this tab. For now, to create a new organization, get in touch with your dedicated solutions architect to setup the Org and ensure you have access ([email protected])

Authentication

The source of the iframe will be /embed. The path you are requesting will be included as a parameter embed_path. This ensures the parameters can be verified before using the app.

The parameters are:

  • organization_id: (integer) id of your organization
  • team_id: (integer) id of the team to be used
  • access_key: (string) the access key from API Key generated in the GrowthLoop UI
  • user_email: (string) the email address of the user accessing the app
  • user_name: (string) the name of the user accessing the app
  • session_length: (integer) the length of inactivity before the session expires, in seconds
  • nonce: (string) a random non-repeated base64 value
  • embed_path: (string) the path being requested
    • /audiences/new create a new audience
    • /audiences/edit edit page for existing audience, requires passing id as a parameter
    • /audiences/show show page for existing audience, requires passing id as a parameter
  • id: (optional, integer) the id of a single record, (ex. an audience id)
  • signature: (string) the encoded value of the other parameters

In order to generate the signature you will need to use the secret key that is provided when you first generate a new API Key.

The string that is encrypted with the secret key has each string value cast to JSON, each integer value must be an integer, a new line between each value, and UTF-8 encoding enforced. No new line after the last value. The values are done in the following order:

  • organization_id
  • team_id
  • access_key
  • user_email
  • user_name
  • session_length
  • nonce
  • embed_path
  • id - only if passing value, otherwise not included

The above are then used with HMAC digest, SHA256, and base64 URL encoded to produce the signature.

For example:

string = [  
  organization_id.to_i,  
  team_id.to_i,  
  access_key.to_json,  
  user_email.to_json,  
  user_name.to_json,  
  session_length.to_i,  
  nonce.to_json,  
  embed_path.to_json,
  id.to_i # optional
].join("\n")

signature = Base64.urlsafe_encode64(
  OpenSSL::HMAC.digest(
    OpenSSL::Digest.new('sha256'),
    api_secret_key,
    string.force_encoding('utf-8')
  ),
  padding: false
).strip
let string = [
    parseInt(params.organization_id),
    parseInt(params.team_id),
    JSON.stringify(params.access_key),
    JSON.stringify(params.user_email),
    JSON.stringify(params.user_name),
    parseInt(params.session_length),
    JSON.stringify(params.nonce),
    JSON.stringify(params.embed_path),
    parseInt(params.id) // optional
].join('\n');

let signature = crypto.createHmac("sha256", api_secret_key).update(Buffer.from(string, "utf8").toString()).digest("base64url");

Embed Users

The email passed in the user_email parameter is used to look for any existing users with that email address. If no user is found we create a new one and they are given the "User" role, (lowest permissions level). We also check to see if the user is part of the team (team_id) that is past. If they are not then they will be added to that team.

Please note that SSO is not used as part of authenticating users via embed. Users created through embed will not have the ability to login to the full application.