# Integration with Appspace

### Overview

The Appspace digital signage solution facilitates the connection between internal digital workplaces and external-facing digital signage displays. For companies already utilizing Appspace, MangoApps can be seamlessly integrated into their existing setup or can be provided as a standalone service to display devices connected through mobile and display apps. This integration aims to improve communication efficiency and boost employee engagement. With Appspace, administrators have the capability to establish sequential or hybrid playlists of media. In this guide, we will walk through the process of setting up a hybrid content screen where MangoApps can be seamlessly incorporated.

<figure><img src="/files/VVStik9VqdMbtmAkYYkH" alt=""><figcaption></figcaption></figure>

***

### Step-by-Step Instructions to Setup MangoApps

For this integration, we will need the API key generated from MangoApps. This key will be used when configuring the Digital Signage. From your MangoApps domain, navigate to **Admin Portal** > **Integration** > **Open API** and copy the following key:

<figure><img src="/files/NQamCGjFoQVbPm6CL6AE" alt="" width="563"><figcaption></figcaption></figure>

With the API key noted, we will now need to configure the Digital Signage module. From the Admin Portal, navigate to the Domain module, then select the Digital Signage tab. Here, toggle the **Enable Digital Signage** ON to enable configuration mode.&#x20;

Next, paste the copied API key into the provided field. Review the content type settings to ensure the correct items are displayed and in the desired quantities. Once verified, click the **Save** button to apply the changes. This process ensures that the Digital Signage setup is properly configured and ready for use.

<figure><img src="/files/9495PmaobV5Zji552J3r" alt="" width="563"><figcaption></figcaption></figure>

Now, we need the URL that will be used when setting up the configuration on the Appspace setup. Copy the URL from here:

<figure><img src="/files/Smmk4Z0WweXEkwKZXtTb" alt="" width="563"><figcaption></figcaption></figure>

This completes the MangoApps side of setup.

***

### Step-by-Step Instructions to Set up Appspace

Log in to your Appspace account. Select **Channels** from along the left hand navigation menu.

### Create a Channel

From the **Channels** navigation menu, click on Advanced Channel. The click the **+ Create Channel** button to start creating your channel.

<figure><img src="/files/BZzT8LOCLFJavjcYsEWC" alt="" width="563"><figcaption></figcaption></figure>

Clicking this button will bring up the Create Advanced Channel menu. From this menu, name the new channel and (optionally) upload an icon. Once satisfied, click the  **Create** button.

<figure><img src="/files/N80kOsYAB9mziBc4UDvY" alt="" width="563"><figcaption></figcaption></figure>

Once you have created your channel, it will be listed within the advanced channel list. Click on the newly created channel and navigate to the edit menu.

<figure><img src="/files/mbiNc2WhStJLsLSx8Rp7" alt="" width="563"><figcaption></figcaption></figure>

Click on the edit icon <img src="/files/WP8Jz6tDGKzl0M3VX5qk" alt="" data-size="line">to bring up the layout designer in a new browser window. From this menu, we can edit the default layout and even rename it.

<figure><img src="/files/wdGsP7XURyNVcSElxt28" alt="" width="563"><figcaption></figcaption></figure>

To select the media needed for the hybrid layout, click on the **+** **Add Media** button. This action will open another window where you can choose the desired media to display.&#x20;

For our integration, navigate to the **Templates** tab. From the **Legacy** options, select **Web (Legacy)**.

<figure><img src="/files/yXb2A321P49QSvXwDqel" alt="" width="563"><figcaption></figcaption></figure>

Copy and Paste the Digital Signage **URL** from MangoApps into the **Website URL** field within Appspace.

<figure><img src="/files/OAtgHNWoygRcexlvu7TJ" alt=""><figcaption></figcaption></figure>

Upon saving, the MangoApps screen will now show in the layout designer.

From the **Properties** section of the layout designer, set the screen size to a 16:9 aspect ratio.

<figure><img src="/files/EVNeWPnqDgypbMdCEh4n" alt="" width="563"><figcaption></figcaption></figure>

Similarly, add other media content like videos, news channels, Weather, Time, and more from the App Gallery. After adding the required media to the layout, save and close the designer layout window.

<figure><img src="/files/aCdITZ0F990gnQxW2Ena" alt="" width="563"><figcaption></figcaption></figure>

Next, return to the advance channel layout page and click on **Preview** to verify all media is aligned and rendering properly.

<figure><img src="/files/Vd0JKIuntKGZg3YUZmk1" alt=""><figcaption></figcaption></figure>

***

### Connecting Display Devices

In order to publish this channel, you will need to register a device.&#x20;

From within the Appspace website, click the **Publish** tab. Then click the **Register a device** button along the right hand side of the menu.

<figure><img src="/files/S40D3bGEaYIp8i8HdL3q" alt="" width="563"><figcaption></figcaption></figure>

Download the [**Appspace for Devices**](https://play.google.com/store/apps/details?id=com.appspace.app\&hl=en_US\&gl=US) <img src="/files/gBVoWGxVXoOrEi5NYsei" alt="" data-size="line"> app from the App store onto your display device.&#x20;

<figure><img src="/files/QU3EchLT8vQ20DsF2MA3" alt="" width="375"><figcaption></figcaption></figure>

Enter the 6-digit PIN shown on the App into the Appspace device registration page.

<figure><img src="/files/iuoZplhzB9ao1sWG583X" alt="" width="563"><figcaption></figcaption></figure>

\
Click on the **Register** button to begin syncing the data from the Appspace website to your digital signage device.&#x20;

Congratulations! You have completed the integration!

***

### End User Experience&#x20;

Below is an example of posts/alerts/recognition communication and content from other systems visible with Appspace.

<figure><img src="/files/SeRuIhaBTKazvXVoi14Q" alt="" width="563"><figcaption></figcaption></figure>

Users can scan the QR code displayed with MangoApps content to install the mobile app, allowing them to react and comment. This enables two-way communication from frontline employees back to the corporate office regarding news delivered on the digital signage.

<figure><img src="/files/XDIzkdULt8ml1P9XUxd6" alt="" width="563"><figcaption></figcaption></figure>

***

### Testing Considerations

* When setting up the URL on MangoApps after entering the API key, it's important to click on the **Preview** button to verify that the content is accessible on the web at the source.
* After creating the Channel with all required media, ensure to click on the **Preview** button to confirm the correct placement of all sections within the selected layout. Additionally, verify that the media is displaying without any errors.
* Once the devices are paired, they should automatically play the selected channel without requiring manual intervention.
* For multiple locations or facilities where a variety of mixed content is desired, it's recommended that each screen has its own **Channel** with selected media. This ensures that the content displayed is tailored to the specific needs of each location or facility.

***

### Security Considerations

Keep MangoApps API key and ScreenCloud 6-digit PIN **confidential** as they can be used to directly affect monitors being used for Digital Signage.

***

### Rollout Recommendations

* Identify the locations and the devices where this Digital Signage needs to be played
* Install the **Appspace Device Apps** on all necessary devices (if not already installed)
* Pair all the devices with the correct screens set on the Appspace admin portal.
* If devices are already installed and there are pre-existing **Channels**, make sure to modify the template to include MangoApps content.<br>


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://guides.mangoapps.com/integrations-guide/digital-signage/integration-with-appspace.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.