Hang Embed

For brands utlizing the API and white labled portal, hang offers an embedded solution to integrate the rewards portal with your own website or app.

Instructions on embedding Hang

Instructions if Hang is handling phone number verification

If you are embedding Hang into your own application, and would like to use Hangs phone number authentication, follow these instructions to embed hang into your app:

1. Use the search for program membership endpoint to lookup a user by external user ID in Hang.

2. If a member exists, use the magic link URL returned as the embed URL to automatically log a user into Hang.

3. If a member does not exist use the url [your project subdomain]/login?phone=[phone]&program_membership_id=uuid&external_user_id=uuid

   1. external_user_id: (required) unique customer ID in your system.

   2. program_membership_id: (optional) existing program membership ID if you have it. We will use this to tie the external user ID to this membership on our end.

   3. phone: (optional) a formatted phone number for your user.

   4. Reach out to hang to get your project subdomain.

Instructions if your brand is handling phone number verification

If you are embedding Hang into your own application, and will be building your own screen to handle phone number authentication, follow these instructions to embed hang into your app:

1. Use the API to create a new customer in Hang. You must provide the phone number if Hang will be sending texts on your behalf. If not, an external user ID is sufficient.

2. When a new customer is created, you will receive an authenticated url (a magic link) valid for a specified amount of time.

3. Use this url as the source or URI in an iFrame WebView.

Embedding Hang in your react native mobile app

      <WebView
        source={{ uri: {AUTHENTICATED_PORTAL_LINK} }}
        applicationNameForUserAgent={"HangNativeApp"}
      />