# Initialize Referd User Profile

{% hint style="info" %}
This guide is not framework specific. Below is a general high level guideline illustrating how to integrate **Referd** with applicable mobile frameworks
{% endhint %}

## Referd user profile sync <a href="#docs-internal-guid-bda94c0c-7fff-97e0-f9f7-3b49e410cb1c" id="docs-internal-guid-bda94c0c-7fff-97e0-f9f7-3b49e410cb1c"></a>

The first touch point is the login/registration screen. This is where users create an account or sign in to an existing account in your app. **Referd** requires users' profiles to be synced to track their progress and reward them accordingly.

User profiles can be synced using the [Create User API](https://developer.tryreferd.com/api-reference/api-reference/player#post-create-player) method. Where it creates or updates the user's profile with each call.

It's recommended that the [Create User API](https://developer.tryreferd.com/api-reference/api-reference/player#post-create-player) is called with every login or account update.

{% hint style="info" %}
Depending on your app design, profile sync API calls can be made from your backend system or from within the app.
{% endhint %}

## Show **Referd U**ser Profile

The second touch point is to show the player's loyalty profile from **Referd** within your app. This is where users can view their progress and rewards.

There  integrate **Referd's** loyalty profile into your mobile app use the out-of-the-box widget.

**Referd** offers pre-built widget that you can easily add to your mobile app if your framework supports Webviews.

<figure><img src="https://983627972-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F1bAQ4IvAKNqrQlsRN5b4%2Fuploads%2FfFEZUmTo2PBMcV0ogy9b%2Fimage%20(4).png?alt=media&#x26;token=3610052e-0d82-4d03-a964-013104a40867" alt=""><figcaption></figcaption></figure>

let's illustrate the sequence to show **Referd** profile widget using Webview:

1. Add menu item to your app menu or user's profile page
2. Upon click, open Webview that points to a self-hosted webpage with **Referd** widget scripts embedded in it.
3. Pass user's data to Webview

The first step is to create a blank HTML page and host it at your desirable domain path as below

*`https://yourdomain.com/webview-address/index.html`*

This created empty page will be responsible to load **Referd** widget for your mobile app user.

On page header include **Referd** widget loading script.

```javascript
<script>
    window.GbLoadInit = function(){
        GbSdk.init({
            playerUniqueId: '{{playerUniqueId}}',
            lang: 'en',
            playerAttributes:{},
            APIKey: '{{Your_API_Key}}'
        });
    };
</script>
<script defer src="https://assets.gameball.co/widget/js/gameball-init.min.js"></script>
```

For mobile app case, a new parameter must exist in the loading script

```javascript
mobile:true
```

So the loading script would be as below

```javascript
<script>
    window.GbLoadInit = function(){
        GbSdk.init({
            playerUniqueId: '{{playerUniqueId}}',
            lang: 'en',
            playerAttributes:{},
            APIKey: '{{Your_API_Key}}',
            mobile:true
        });
    };
</script>
<script defer src="https://assets.gameball.co/widget/js/gameball-init.min.js"></script>
```

### Pass user data to your Webview <a href="#how-to-pass-data-from-chatfuel-to-your-webview" id="how-to-pass-data-from-chatfuel-to-your-webview"></a>

The widget will display user's profile depending on the passed parameters to the init script. In order to pass user's data from your mobile app to Webview\Referd's widget, there are two options depending on your framework capabilities.

If the used framework supports passing params\variables to Webview you can pass logged in user profile data directly to the Webview and inject them to **Referd** widget loading script.

The other option is to pass players data to **Referd** loading script via query strings while loading Webview as below example

*`https://yourdomain.com/webview-address?playerUniqueId={{playerUniqueId}}&displayName={{displayName}}`*

Once the data is added to the query string, you can use JavaScript to retrieve the data and pass it to the **Referd** widget script. Here's an example of how you can do this:

<pre class="language-javascript"><code class="lang-javascript">&#x3C;script>
    // Get the query string parameters
<strong>    const queryString = window.location.search;
</strong>    const urlParams = new URLSearchParams(queryString);

    // Get the user's email and display name from the query string
<strong>    const playerUniqueId= urlParams.get('playerUniqueId');
</strong>    const userDisplayName = urlParams.get('displayname');

    window.GbLoadInit = function(){
        GbSdk.init({
            playerUniqueId: {{playerUniqueId}},
            mobile:true,
            playerAttributes: {
                displayName: {{displayName}}
            },
            lang: 'en',
            APIKey: '{{Your_API_Key}}'
        });
    };
&#x3C;/script>
</code></pre>

By following the steps outlined above, you can easily pass user data to the widget script and provide your users with a seamless and personalized experience.

{% hint style="warning" %}
If you choose to go with using the pre-built widget in a Webview. You need to take care of the Webview interactions within your app. How the user can navigate from and to the Webview easily. We recommend showing the Webview as a modal with a back button on top.
{% endhint %}