HTML Embed App Guide

Learn how to display embedded & custom code as content on your digital signage screens with Fugo's HTML Embed app

Sarah avatar
Written by Sarah
Updated over a week ago

Table of Content


What's the HTML Embed app?

The Fugo HTML Embed app simplifies the process of sharing content from your website, an external widget, or info from platforms like Google Maps onto your digital screens. This enables you to easily adapt web content into a dynamic feed, continuously updating and displaying on the digital screens.

If it has an embed code... chances are we can show it!

It lets you:

  • Grab an embeddable code from webpages or online services & quickly render them into content for your screens

  • Make any custom adjustments required to your embeddable code and these will be reflected on screens

  • Add your embedded code to a playlist or custom Design Studio layout and allow content to update automatically on screens


Configuring the HTML Embed app

Note: there are two ways to configure content with Fugo - via our playlist builder and in our design studio. We’ll cover the steps for both methods in each section.

1. Using the playlist builder

1.1 Log into your Fugo Account. If you don’t have an account yet, you can start your 14-day free trial here.

1.2 Click Apps in the top navigation bar to get to our app store.

1.3 Scroll to find the HTML Embed app in the store. To find it even faster, you can search for it via the search bar at the top of the store.

1.4 Click Try App to create a new playlist with the app.

1.5 A window will appear where you can customize the app’s settings.

1.6 Click the Add My Code button to paste or write your code into the app in the space provided.

1.7 Hit Preview to make sure your content has been rendered correctly. If it hasn't rendered correctly, you may need to check that the markup is correct.

💡 If you can't get your app preview to load correctly, we recommend that you ask a member of you development or engineering team to assist you. If you don't have such a resource available to you, you may reach out to support@fugo.ai for help.

Click Apply when you're happy with the preview.

1.8 Next, you set the duration for your app - that is, how long it will run inside of a playlist before the next piece of content.

1.9 Toggle on the Scroll option if you want your app to scroll on screen.

1.10 Toggle on the Transparent Background option if you want your app to have a transparent background.

This option may be helpful if you plan to overlay the app on top of a colored background in the Design Studio (more on custom design layouts in section 2.)

1.11 When you’re done, click Save Changes at the bottom right corner of the window. This will take you to back to the Playlist Builder to continue building out your playlist.

To continue on to publishing instructions from here, you can skip to this section (step 3.6)

2. Using the Design Studio

2.1 Click Studio in the top navigation bar. Then click Create in Studio to start a new design.

2.2 This will open up a blank canvas for you to start adding content to. To add the HTML Embed app, either scroll to find it in the Apps menu to the left or search for it to find it faster.

2.3 Drag and drop the app onto your canvas from the menu. Or simply click on it and it will be added to your current slide.

2.4 You can drag the sizing handles of the app around to change the size. Make it smaller so you can split your screen and add other content, or make it full screen - that’s totally up to you!

2.5 Customizing the HTML Embed app settings works the same way in the Design Studio as it does in the playlist builder - all settings will be found in the panel to the left. To bring up the panel, click on the app from the canvas.

Follow the steps in section 1 above to configure the app.

You can continue to customize your content however you wish in the studio! Add media from one of our integrations, add stickers, use frames to create unique media stylings. Add slides with extra or duplicate content. Or even split your screen into zones.

2.6 When you’re satisfied with how your content looks, click Save and Close. This will close out the design studio. To publish this content, you’ll need to add it to a playlist, which we’ll cover in the next section.


3. Publishing the HTML Embed app to your screen/s

In order to get your content onto your screens, you need to add it to a playlist.

3.1 Select Playlists in the top navigation bar and Create Playlist to start a new playlist.

You can also open the playlist builder with the Publish option located in your Studio content.

3.2 Give your playlist a name (we suggest making it something relevant to distinguish it from other playlists later on down the road.)

3.3 Next, click Select Screens to choose the Screen/s, Screen Group, or Channel where you'd to publish your playlist.

3.4 If you haven't added content to your playlist (because you built your content in the Design Studio, for example) now you can. Click Select Content.

If you created your HTML Embed app display in the Design Studio, you'll find it saved in the Studio Content tab.

3.5 You can add more content to your playlist at any time by clicking Add More Content and choosing other apps, uploaded media, saved dashboards, or Studio content.

3.6 When you've selected all the content items you want to add to this playlist, it's time to put it on screen or schedule a time for it to go live.

Click Publish to send this content to your screen/s right away. This action is helpful if you're simply testing content.

If you want to set a more precise recurring schedule for this content or plan for it be scheduled in advance, you can use our Scheduler to do so.

You can read more about your publish & scheduling options in our Playlists collection.

3.7 If you don’t want to publish just yet, you can click Finish Later and come back to your playlist at any time.


Need more help?

If you're struggling to get your code to work, reach out to the support team at support@fugo.ai or via the handy chat box in the bottom right corner of the CMS.

Happy publishing!

Did this answer your question?