# Integration with Tagbox

### Overview

Integrating Tagbox widgets with MangoApps allows you to enhance your MangoApps pages with real-time social media content. This guide will walk you through the process of connecting social accounts to Tagbox, creating a widget, and embedding it into MangoApps using an iframe widget.

<figure><img src="https://1627138357-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LjKbJ2ssjhlUZRcGOXW%2Fuploads%2FHLxCpP0P26iKSBGQJtcQ%2Fimage.png?alt=media&#x26;token=13406e12-5458-4622-a06f-209dd89a85c3" alt=""><figcaption></figcaption></figure>

***

### Setup Within Tagbox

To get started, log into your Tagbox account.&#x20;

#### **Connecting Social Accounts**

Navigate to the **Accounts** tab along the left hand navigation menu and click **+ Add Accounts** to add your social media accounts.

<figure><img src="https://1627138357-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LjKbJ2ssjhlUZRcGOXW%2Fuploads%2FisBcbnqrlP7DyJfnfvgq%2F16-09-2024-03-20-52.png?alt=media&#x26;token=0e06b4b7-40f4-4bbd-9b4e-c87cb264569c" alt="" width="563"><figcaption></figcaption></figure>

Follow the prompts to connect your desired social media accounts (e.g., Facebook, Instagram, Twitter). Verify that the **Status** column shows a green **Connected** before proceeding.&#x20;

***

#### **Creating a Widget**

Once your accounts have been successfully connected, navigate to the **Widgets** section along the left hand navigation menu.

Click **Create New Widget** to start building a new widget for your social media feed.

<figure><img src="https://1627138357-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LjKbJ2ssjhlUZRcGOXW%2Fuploads%2FVgXIiEuXFsTkebmS4inA%2F16-09-2024-03-32-42.png?alt=media&#x26;token=5b30a353-6588-4d7b-b660-9b29f8ec4df0" alt="" width="563"><figcaption></figcaption></figure>

Customize your widget to make it unique by configuring different settings, such as:

* **Themes**: Choose the look and feel of your widget.
* **Cosmetics**: Fine-tune the appearance, such as fonts, colors, and layout.
* **Moderation**: Control what content appears on the widget.

<figure><img src="https://1627138357-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LjKbJ2ssjhlUZRcGOXW%2Fuploads%2FZhmDFaFQgt5QFLInLn2q%2F16-09-2024-03-34-04.png?alt=media&#x26;token=e4696104-e651-4e20-8f13-93fdabe5bb30" alt="" width="563"><figcaption></figcaption></figure>

After customizing your widget, **Publish** it to proceed to the share menu.

***

#### **Obtaining the iFrame Code**

Once your widget is created and published, you will be presented with various share options. For our purposes, click the **Embed on Webpage** option.&#x20;

<figure><img src="https://1627138357-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LjKbJ2ssjhlUZRcGOXW%2Fuploads%2F5gcFyLy7rjawnkoukB1Z%2F16-09-2024-03-37-14.png?alt=media&#x26;token=7824427f-f438-47d4-bc3f-2b2efa7da3d3" alt="" width="563"><figcaption></figcaption></figure>

In number 2 on the resulting screen, click the **iFrame** tab. Copy the **iFrame code** to use in MangoApps.

***

### Setup Within MangoApps

In MangoApps, navigate to the page where you want to embed the Tagbox widget. For this example, we are adding the widget to the Company page.

#### **Embedding the Tagbox Widget**

In edit mode, click the **+ Pick from Widget Gallery** button. From the gallery, add the **iFrame Embed** widget to the page.

<figure><img src="https://1627138357-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LjKbJ2ssjhlUZRcGOXW%2Fuploads%2FnkE0nKvJZH3hpfSkmk3w%2Fezgif-1-32312d1979.gif?alt=media&#x26;token=ff5b3145-7652-4315-8421-4f79faae6e34" alt="" width="563"><figcaption></figcaption></figure>

In the widget configuration menu, paste the iFrame code from Tagbox into the widget.

<figure><img src="https://1627138357-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LjKbJ2ssjhlUZRcGOXW%2Fuploads%2FkvBvlOVXNJDXuMBfb98p%2F17-09-2024-08-57-45.png?alt=media&#x26;token=4b7d8bfa-4024-4747-989e-f689b6803022" alt="" width="563"><figcaption></figcaption></figure>

Optionally, upload any necessary header images or additional content to make the page more visually appealing.

<figure><img src="https://1627138357-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LjKbJ2ssjhlUZRcGOXW%2Fuploads%2Fl28bbNbRPsyfSU36gHO0%2F17-09-2024-08-57-52.png?alt=media&#x26;token=147a53f9-0a9f-4fde-9465-98b80c5d62f1" alt="" width="563"><figcaption></figcaption></figure>

**Save and Publish** the page to apply changes.

***

### End User Experience

Once the Tagbox widget is embedded in MangoApps, end users will see real-time social media content directly on the page.&#x20;

<figure><img src="https://1627138357-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LjKbJ2ssjhlUZRcGOXW%2Fuploads%2FTdflN8aR5bx7sSBGusCI%2F17-09-2024-08-58-00.png?alt=media&#x26;token=dee1a695-ba1f-4146-be0a-5b86e1dfd9b1" alt="" width="563"><figcaption></figcaption></figure>

The widget will automatically update as new posts are published to the connected social media accounts. The feed is interactive, allowing users to scroll through or engage with content, depending on the widget configuration.

***

### Security Considerations

* Ensure that you are only connecting official and secure social media accounts to Tagbox.
* Review the moderation settings carefully to avoid displaying inappropriate or unwanted content on your MangoApps pages.
* Both Tagbox and MangoApps should support HTTPS to ensure that all embedded content is delivered securely.
* Ensure that the social accounts connected to Tagbox adhere to your company’s security and privacy policies.

***

### Rollout Recommendations

* **Test Before Rollout**: First, test the integration on a smaller, internal page to ensure the widget functions as expected.
* **Communicate the New Feature**: Inform your users about the new feature through internal communication channels, highlighting the benefits of real-time social media content on MangoApps.
* **Provide Documentation**: Offer a simple guide or video tutorial for end-users to understand how to interact with the embedded widget.
* **Monitor and Adjust**: Regularly monitor the content displayed and adjust moderation settings as necessary to ensure relevance and quality.
