Customizing Beautiful.ai Player Links

Plan Availability: Team and Enterprise

Beautiful.ai Teams can customize the URL used for Public and Password-Protected share links to presentations. For example, you might prefer that your customers see your company URL when clicking on a presentation link instead of www.beautiful.ai or you might want to add your own branding or CTAs to the player page.

NOTE: Custom URLs are only available for Team and Enterprise plans. Custom URLs are only available for Public and Password-Protected links. Secured Share emails and embed code will not use Custom URLs.

Getting Started--IT 

In order to take advantage of this feature, you or someone in your company will need to create and host a webpage at the desired URL that embeds the Beautiful.ai presentation as an iFrame. Sample html code for this page is below but you can customize it as desired.

Custom URLs can be configured in a variety of ways but this document will focus on only the most common usage, creating a custom url like “www.[yourdomain].com/player” that links to a page on your website that displays a Beautiful.ai presentation.

NOTE: Other configurations such as using a subdomain or custom HTML are not discussed here but can be inferred by a web developer from the information here.

Creating a webpage to embed the Beautiful.ai Player 

You will first need to create and host a webpage on your site that embeds the Beautiful.ai player in an iFrame and uses some simple javascript to parse the presentation link from the browser URL. 

The following snippet of HTML will embed the Beautiful.ai player on your web page:

<div style="position:relative;width:100%;height:0;padding-bottom:56.25%;">

   <iframe style="position:absolute;width:100%;height:100%;border:solid 1px #333;" allowfullscreen="true" mozallowfullscreen="true" webkitallowfullscreen="true"></iframe>

</div>

<script>

   let iframe = document.querySelector("iframe");

   iframe.src = `https://beautiful.ai/player/${window.location.search.substring(6)}`

</script>

NOTE: The exact Javascript necessary for loading the player iFrame is dependent on how you configure the custom URL but this code should work for any custom urls like “www.[yourdomain].com/player?link=${linkId}” that contains the query parameter “?link=${linkId}”.

Customizing the Beautiful.ai Link URL

Once your webpage is set up and live, anyone with Owner role can go to the Advanced Settings pane of your Team Account settings to configure Beautiful.ai to use your custom URL for links. 

The custom URL must contain the special placeholder linkId. The linkId will be replaced with the presentation link data necessary to play the presentation when the Copy Link button is clicked while sharing a link..

For example, if you want to use a simple URL to a page on your website using the HTML example above, you might configure the custom URL to:

www.[yourdomain].com/player?link=${linkId} 

NOTE: In this example, the custom URL must include “?link=${linkId}” query parameter in order to work. The domain and the path can be whatever you want as long as it points to a page with the HTML above.