Embedded Flow

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

img

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>
<script>
const client = new Branch.Onboarding({
organizationId: '100019',
onLoad: () => client.open(),
// Optionally do something when the
// user has completed onboarding
onComplete: () => {},
// Optionally do something when the
// user has exited onboarding early
onExit: function () => {},
});
</script>

Configuration

Parameters

The widget accepts the following parameters:

ParameterRequirementDescription
orgRequiredYour assigned Branch organization ID
prefillOptionalAn object used to prefill form fields in the onboarding flow
onLoadOptionalA callback fired when the onboarding flow has successfully loaded into your page
onExitOptionalA callback fired when the user has exited from the flow before completing
onCompleteOptionalA callback fired when the user completes the onboarding flow

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"
}
})
OptionFormat
firstNameA-Z and spaces allowed
lastNameA-Z and spaces allowed
phoneNumberNumbers allowed (no separators)
emailAddressValid 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>