# Integration with OC Tanner

### Overview

OC Tanner is a rewards and recognition platform utilized by organizations to acknowledge and reward their employees. This guide provides comprehensive instructions on setting up this integration for efficient utilization within your MangoApps domain.

***

### OC Tanner Integration Setup

**Step 1: Set Authorization**

1. Gather the following details from the client side:
   * API URL
   * Client Key
   * Client Secret Code
2. Encode the Client Key and Client Secret Code to create a "Base 64 Authorization Token".
   * Use a tool like <https://www.base64encode.org/> for encoding.
   * Enter the client key followed by the client secret key separated by a colon (:).

<figure><img src="https://1627138357-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LjKbJ2ssjhlUZRcGOXW%2Fuploads%2FpV6pYTHIL7Fe6DUBaZnK%2Fbngngdf.png?alt=media&#x26;token=60c5fded-7d0a-4bb2-a154-64c9ef962e89" alt="" width="563"><figcaption></figcaption></figure>

***

**Step 2: Establish Connection and Access Token Creation**

Using any third-party API tool (for the purpose of this walkthrough, we will be using PostMan), first generate the authorization token using the Post Method, followed by the GET method to receive the event details.

1. Generate the authorization token using the POST method with the API URL: <https://api.octanner.io/v1/oauth2/token>.
2. Add a new parameter in the Header section:

   * **Key**: Authorization
   * **Value**: Basic followed by the Base64 encoded value generated in Step 1.\
     **Example**: Basic\<space>Base64\_encoded\_value

   <figure><img src="https://1627138357-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LjKbJ2ssjhlUZRcGOXW%2Fuploads%2Fr16xTSQwakv6oEkzvQyl%2Fasdjlkkl.png?alt=media&#x26;token=f3c3491e-a456-4b6e-86cd-bf0395498e90" alt=""><figcaption></figcaption></figure>
3. Switch to the **Body** tab and add a new key as **grant\_type** with the value **client\_credentials**.

<figure><img src="https://1627138357-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LjKbJ2ssjhlUZRcGOXW%2Fuploads%2FMPKytdwKandr4f2mNvBG%2Fcvxczcv.png?alt=media&#x26;token=a6f871a4-1779-4913-a141-cc58fd40ec5f" alt=""><figcaption></figcaption></figure>

4. Click on Send and copy the generated **access\_token** value from the **Response** field.

<figure><img src="https://1627138357-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LjKbJ2ssjhlUZRcGOXW%2Fuploads%2FFHk2FdSkd7GT4mkTCR9w%2Fnghnfg.png?alt=media&#x26;token=b3b5c485-a2a8-4450-9608-1ef3e8031128" alt="" width="563"><figcaption></figcaption></figure>

***

**Step 3: Retrieve Events**

1. Using the **GET Method** in PostMan, we will access the **GET Events** via the URL: <https://api.octanner.io/events/v1/client/events>.
2. Add the **access\_token** generated in Step 2 as a header:
   * **Key**: Authorization
   * **Value**: Bearer followed by the “access\_token” copied from Step 2.\
     **Example**: Bearer\<space>access token

<figure><img src="https://1627138357-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LjKbJ2ssjhlUZRcGOXW%2Fuploads%2F7dA00cZGRCskAMSRe7tl%2Fnbfdng.png?alt=media&#x26;token=fac1a319-421c-4ff3-bc6c-4ac56c631cae" alt=""><figcaption></figcaption></figure>

3. Click **Send** to receive all available rewards/recognition events from **OC Tanner**.

***

### MangoApps Integration Setup

To set up the integration in MangoApps, create a tracker and proceed through the Data Source, Column Mapping, and Schedule Settings steps.

**Step 1: Tracker Creation**

1. Create a new tracker in MangoApps and add relevant columns.
2. From the **Tracker Tools** dropdown menu, select **Data Uploader**.

<figure><img src="https://1627138357-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LjKbJ2ssjhlUZRcGOXW%2Fuploads%2FYxSaZ7LyRg6CYjB1j3h4%2F19-03-2024-08-38-46.png?alt=media&#x26;token=92c0782a-201b-4872-a790-b70665501aea" alt="" width="563"><figcaption></figcaption></figure>

3. Select **Upload or Add Sources** from the pop-up menu and add the following details:

**Data Source**: HTTPS

**Data URL**: <https://api.octanner.io/events/v1/client/events>

**Authorization Type**: Token Based

**Auth Token URL**: <https://api.octanner.io/v1/oauth2/token>

**Header**:

* **Key**: Authorization
* **Value**: Output of Step 1

**Body**:

* **Key**: grant\_type
* **Value**: client\_credentials

Data entry will appear similar to this:

<figure><img src="https://1627138357-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LjKbJ2ssjhlUZRcGOXW%2Fuploads%2FqC4uitPAOyRFQtYQSzPT%2Fsgfhsnfdghds.png?alt=media&#x26;token=e313fd19-f79b-48e9-ad3d-2cd3bc0fe949" alt="" width="536"><figcaption></figcaption></figure>

4. Click **Test Connection** to verify successful access.

***

**Step 2: Column Mapping**

Map the columns in the tracker with the input columns from the OC Tanner data. Ensure alignment between manually added columns and data from OC Tanner.

{% hint style="success" %}
To show names and user profile images, users must exist within your MangoApps domain.
{% endhint %}

{% hint style="info" %}
By default, OC Tanner refers to **Employee ID** as a **user identifier**.
{% endhint %}

***

**Step 3: Schedule Settings**

In this section, you can define the synchronization cycle between OC Tanner and MangoApps. This  ensures that data is updated at regular intervals, maintains accuracy, and keeps consistency across platforms. Additionally, this section includes the option to enable or disable schedule activation,  providing flexibility in managing when synchronization occurs, allowing users to optimize resource usage and minimize disruptions during critical operations.

<figure><img src="https://1627138357-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LjKbJ2ssjhlUZRcGOXW%2Fuploads%2FtZ9FlLiFfSQ4DBC8Z3HG%2Ffxzbnd.png?alt=media&#x26;token=5dbdfe6a-0109-4058-9fa8-57450574c02f" alt="" width="563"><figcaption></figcaption></figure>

**Save** the configuration or click on the **Save & Fetch Now** to retrieve the results immediately.

***

### **Tracker Widget Setup**

By creating a tracker widget, users are able to convert the tracker table view into an easily accessed graphical view. from the **Tools** dropdown menu in the newly created tracker, click **Add Table to Widget Gallery**. By doing this, the tracker table will now be available in the widget gallery for further configuration.&#x20;

<figure><img src="https://1627138357-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LjKbJ2ssjhlUZRcGOXW%2Fuploads%2FhZ3ieVn0cUuh24Lzdm6Z%2Fgnjdfgn.png?alt=media&#x26;token=9c836bb5-a6be-4bd6-ac2b-3d17e404e13a" alt=""><figcaption></figcaption></figure>

***

**Formatting the Tracker Widget**

Navigate to the **Widget Gallery** and select the created Tracker widget.

<figure><img src="https://1627138357-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LjKbJ2ssjhlUZRcGOXW%2Fuploads%2FLs3fBmEItvN86C4LMEBM%2Fjmmtdyjd.png?alt=media&#x26;token=235f6854-8bb4-4c0b-870f-71786efcbdfc" alt="" width="563"><figcaption></figcaption></figure>

{% hint style="info" %}
By **default** the widget will display the data in tabular form, this view can be converted to a different style as per your requirements.
{% endhint %}

From the **Customize View** window, choose the view type of **List & Details** and map the list options to an appropriate field of your choice.

<figure><img src="https://1627138357-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LjKbJ2ssjhlUZRcGOXW%2Fuploads%2FQCxWQ6GfcEK4Cd7K94nh%2Fsgawsdsa.png?alt=media&#x26;token=391bda22-690d-4777-8d1e-343db2ff43bc" alt="" width="563"><figcaption></figcaption></figure>

From the **Detail View**, you can upload a banner image of your choice. This image will be displayed for all rewards uploaded via this tracker.

<figure><img src="https://1627138357-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LjKbJ2ssjhlUZRcGOXW%2Fuploads%2FLgKtOyzKP2FuWXW3DkGD%2Ffgnjdfg.png?alt=media&#x26;token=d08826f5-5a7c-46e2-bc0d-e9f118003d39" alt="" width="563"><figcaption></figcaption></figure>

**Save** the widget settings to display rewards data.

***

Click on each reward to view a pop-up menu with complete details. Use the slider option to navigate through the rewards at your leisure.

<figure><img src="https://1627138357-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LjKbJ2ssjhlUZRcGOXW%2Fuploads%2FQs7Lx8jJ4oKGec58e9dY%2Fdhfsdf.png?alt=media&#x26;token=2f8dac9d-8693-43ee-b6b7-5b2a516999fd" alt="" width="563"><figcaption></figcaption></figure>

***

### Security Considerations

Authentication is done using the ClientKey and the Secret provided by OC Tanner (client side), although the API URL is global, these keys are unique to the client site so only the data specific to these ClientKey and Secret combination can be fetched.\
\
Any failures will be recorded in the Data Uploader logs and additional information related to failures can be fetched from server logs.

<figure><img src="https://1627138357-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LjKbJ2ssjhlUZRcGOXW%2Fuploads%2FOrw2Fn75IsXSp2n1nipY%2Faegaerga.png?alt=media&#x26;token=75008a03-d9b4-4811-855e-ae4e64984ec3" alt="" width="563"><figcaption></figcaption></figure>
