Getting Started

identity ui

Browse through ReachFive UI SDK JS methods. These methods alter the DOM, so a <div> must be provided with a specific id on your webpage.

Browser compatibility

The UI SDK is compatible with the latest versions of:

Internet Explorer is no longer supported as of the 17 August, 2021. It has been deprecated by Microsoft.

Prerequisites

To initialize the ReachFive client:

  • You need a Domain URL and Client ID.

  • You must whitelist all available domains where the ReachFive SDK will be used.

    This is done in the Allowed Origins (CORS) field of your ReachFive console, in the Settings menu.

The ReachFive client detects the user locale from the browser. You can override this at initialization by providing a language as shown in the steps below.

...
const client = createClient({
    domain: DOMAIN,
    clientId: CLIENT_ID,
    // Optional parameter
    language: 'Here paste a language code' (1)
});
1 Here, you could put something like es for Spanish to override the browser language.
Currently supported languages

  • ar - العربية Arabic

  • de - Deutsch German

  • en - English

  • es - Español Spanish

  • fr - Français French

  • hu - Magyar Hungarian

  • it - Italiano Italian

  • jp - 日本 Japanese

  • ko - 한국인 Korean

  • nl - Nederlands Dutch

  • pt - Portuguese

  • ru - Ру́сский Russian

  • sk - Slovenský Slovak

  • zh-CN - People’s Republic of China Simplified Chinese

  • zh-Hans - Simplified Chinese

  • zh-Hant - Traditional Chinese

  • zh-HK - Hong Kong Traditional Chinese

  • zh-MO - Macao Traditional Chinese

  • zh-SG - Singapore Simplified Chinese

  • zh-TW - Taiwan Traditional Chinese

You must have at least version 10.0.0 of Node.js.

Check this with node -v from your terminal like so:

$ node -v
v20.12.1

Installation

  1. You can install the latest release of the package via npm:

    npm install --save @reachfive/identity-ui

  2. You can also download and include with a script tag from the third-party jsdelivr CDN:

    <script src="https://cdn.jsdelivr.net/npm/@reachfive/identity-ui@x.y.z/umd/identity-ui.min.js"></script>
    The SDK registers a reach5Widgets global variable in the window object.

CDN vs Node

You can choose to call ReachFive’s SDK libraries with either Node or a Content Delivery Network (CDN).

Option Notes

CDN

Using the CDN approach allows you to make the calls directly in a page without the need for Node or server-side code.

Node

Using the Node approach means you want to make the libraries available to your entire ecosystem.

This is typically because you want to integrate it as part of your own SDK.

Prerequisites:

You must have Node installed in order to use the Node approach and install npm packages. You can also install npm packages with yarn if so desired.

  1. Use the createClient method to initialize a ReachFive client.

    • Node

    • CDN

    import { createClient } from '@reachfive/identity-ui';

const DOMAIN        = 'Here paste your ReachFive domain';
const CLIENT_ID     = 'Here paste your ReachFive client ID';

const client = createClient({
    domain: DOMAIN,
    clientId: CLIENT_ID,
    // Optional parameter
    language: 'Here paste a language code',
    locale: 'fr-FR' (1)
});
    1 Optional parameter where fr-FR is the locale and the value is automatically added in the Custom-Locale header parameter. 
    <script src="https://cdn.jsdelivr.net/npm/@reachfive/identity-ui@x.y.z/umd/identity-ui.min.js"></script> (1)
<script type="text/javascript">
    const DOMAIN        = 'Here paste your ReachFive domain';
    const CLIENT_ID     = 'Here paste your ReachFive client ID';

    const client = reach5Widgets.createClient({
        domain: DOMAIN,
        clientId: CLIENT_ID,
        // Optional parameter
        language: 'Here paste a language code'
    });
</script>
    1 Replace x.y.z by the specific version you require.
All code examples assume the ReachFive client was instantiated and stored in a variable named client.