Customizing Beautiful.ai Player Links

Fatima

Updated July 10, 2026 21:13

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 JavaScript to parse the presentation information from the browser URL.

The sample below demonstrates one common implementation. Depending on your website platform or CMS (such as Wix, HubSpot, or a custom web application), you may need to adjust the JavaScript to correctly construct the Beautiful.ai player 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 required to load the Beautiful.ai player depends on how your website constructs the player URL. The sample above demonstrates one common implementation using the ?link=${linkId} query parameter, but some website platforms or CMS solutions may require additional logic to generate the final player URL correctly.

Validate Your Configuration

After configuring your custom player URL, verify the following before troubleshooting your website:

1. Verify the generated custom link

After clicking Copy Link from Beautiful.ai, confirm the generated URL resembles:

https://www.yourdomain.com/player?link=<presentation-id>

The link parameter should contain a presentation identifier.

2. Verify the original Beautiful.ai player link

Confirm the original Beautiful.ai player link opens successfully outside of your custom domain.

For example:

https://www.beautiful.ai/player/<presentation-id>/<presentation-name>

If the original player link does not load, the issue is unrelated to your custom player configuration.

3. Test the embedded player

If your custom page loads but the presentation does not display correctly, temporarily replace the dynamically generated player URL with a known working Beautiful.ai player URL.

If the presentation loads successfully using a hardcoded player URL, your iframe and website configuration are functioning correctly, and the remaining issue is how the player URL is being generated dynamically.

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 placeholder is automatically replaced when a presentation link is copied. Your webpage can use this value to construct the Beautiful.ai player URL used to display the presentation.

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 the ?link=${linkId} query parameter. The domain and page path can be customized as needed, provided they point to the webpage hosting your embedded Beautiful.ai player.

Troubleshooting

If your custom player page loads but the presentation does not display correctly:

Confirm the original Beautiful.ai player link opens successfully.
Verify that your generated custom URL contains a populated link parameter.
Inspect the embedded iframe and verify that its final src points to the expected Beautiful.ai player URL.
As a diagnostic step, temporarily configure the iframe to load a known working Beautiful.ai player URL directly. If the presentation loads successfully, the issue is with how the player URL is being generated dynamically rather than with the iframe or hosting platform.