Embedded Flow

Getting started with onboarding your users to Branch can be achieved easily with the embedded flow.

Embedding the Flow

Branch can be integrated onto your page with the following code snippet. Remember to replace the organization ID with your organization's ID.

<script src="https://accounts.branchapp.com/js/embed.js"></script>

<!--
  Use this import if you are testing in a sandbox environment
  <script src="https://accounts.branchapp.com/js/embed-sandbox.js"></script>
-->

<script>
  const client = new Branch.Onboarding({
    organizationId: '100019',
    onLoad: () => client.open(),

    // Optionally do something when the
    // user successfully creates an account
    onAccountCreated: (user) => {},

    // Optionally do something when the
    // user has completed and exited onboarding
    onComplete: () => {},

    // Optionally do something when the
    // user has exited onboarding early
    onExit: () => {},
  });
</script>

Configuration

Parameters

The widget accepts the following parameters:

Parameter	Requirement	Description
org	Required	Your assigned Branch organization ID
prefill	Optional	An object used to prefill form fields in the onboarding flow
onLoad	Optional	A callback fired when the onboarding flow has successfully loaded into your page
onExit	Optional	A callback fired when the user has exited from the flow before completing
onComplete	Optional	A callback fired when the user completes and exits the onboarding flow
onAccountCreated	Optional	A callback fired when the user account is created

Prefill Options

Initialize the widget with optional values that will be prefilled into the appropriate onboarding flow fields. Individuals can still edit prefilled values.

new Branch.Onboarding({
    ...
    prefill: {
      firstName: "Jane",
      lastName: "Doe",
      phoneNumber: "1231234567",
      emailAddress: "janedoe@branchapp.com"
    }
  })

Option	Format
firstName	A-Z and spaces allowed
lastName	A-Z and spaces allowed
phoneNumber	Numbers allowed (no separators)
emailAddress	Valid email address

Instance Methods

When you initialize a widget, you can store it in a variable and call a few methods on it later:

<script>
  const client = new window.Branch.client(params);

  // sometime later:
  client.open();

  // you can also programmatically close
  // the widget if you need to:
  onboarding.close();
</script>