# Integration

You can seamlessly incorporate our Partner Web App into your website.&#x20;

To achieve this, you must use this Partner URL:&#x20;

```url
https://app.socios.com/partner/[PARTNER_ID]?partnerWebAppId=[PARTNER_ID]
```

An example URL would be the one from the Bern football club [BSC Young Boys](https://www.bscyb.ch/):

{% code overflow="wrap" fullWidth="false" %}

```url
https://app.socios.com/partner/5796d2d6-da2a-4914-82fe-3eeaba3c1bca?partnerWebAppId=5796d2d6-da2a-4914-82fe-3eeaba3c1bca
```

{% endcode %}

You can retrieve the `Partner ID` you want by browsing on app.socios.com and looking for the specific partner detailed page. The id will be located after `/partner/` in the URL.

They designed the integration to look like this:

<figure><img src="https://31329255-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FMDcaoJLMj5Y3jzFMTONF%2Fuploads%2Fjdxv6ChJXZ92yNZQZp7S%2Fimage.png?alt=media&#x26;token=d1385639-535d-4251-87cc-68965fa8529b" alt=""><figcaption></figcaption></figure>

Try it for yourself: <https://ybo.bscyb.ch/>

## Web integration

You can insert the Partner Web App into an iframe for a responsive website.&#x20;

The necessary HTML code is:

{% code overflow="wrap" %}

```html
<iframe src="https://app.socios.com/partner/[PARTNER_ID]?partnerWebAppId=[PARTNER_ID]" width="100%" height="800px" allow="camera 'src'; publickey-credentials-get 'src'"></iframe>
```

{% endcode %}

### **SEO Optimisations**

Here are two ways to improve the findability of your Fan Token page from search engines:

* Fill the `<title>` HTML tag with "\[Partner shortname] Fan Token", so that it  appears clearly in the browser tab. \
  For instance, for Apollon Limassol fan token: `<title>APL Fan Token</title>`
* Make sure to mention this string in the URL of the page. \
  For instance: <https://www.apollon.com.cy/en/apl-fan-token/>

## Mobile integration

For mobile apps, you can create a native WebView using the following URL:

```url
https://app.socios.com/partner/[PARTNER_ID]?partnerWebAppId=[PARTNER_ID]
```

This way the web app will be seamlessly implemented within your mobile app. It can work on both native or hybrid mobile app.

Of course, building a native WebView requires much more work than just using this URL -- starting with the fact that a native implementation will require you to develop it twice (iOS + Android).

See for instance how French rugby club Stade Français did it:

<div><figure><img src="https://31329255-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FMDcaoJLMj5Y3jzFMTONF%2Fuploads%2Fryfl554IaoYLU7FpMd5i%2FSFP%201.png?alt=media&#x26;token=f2b4ae53-8d34-4dc3-be68-c324c6a52dfa" alt=""><figcaption></figcaption></figure> <figure><img src="https://31329255-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FMDcaoJLMj5Y3jzFMTONF%2Fuploads%2FoCN4qUiMXEOosIQYpLs5%2FSFP%202.png?alt=media&#x26;token=4ba3df7c-c6cd-4374-be7e-7dcbb0718153" alt=""><figcaption></figcaption></figure> <figure><img src="https://31329255-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FMDcaoJLMj5Y3jzFMTONF%2Fuploads%2F430cN4t8Off4nTVFQAXp%2FSFP%203.png?alt=media&#x26;token=0ccb83c3-7ddc-4848-bde4-5320413649de" alt=""><figcaption></figcaption></figure></div>
