The source property of web content determines what content is embedded. It could be the URL of a livestream or a website that you control. You can also embed code directly by selecting the HTML option.

URL

If the web content that you would like to embed is hosted at a URL then you can simply paste the URL in as the source. This works for videos from other platforms like Youtube, Rumble, and Odyssey, for websites that you control like a blog, or for other hosted media like eMagazines.

Please note that embedding a website that you don’t control may not work on all platforms. Some websites do not allow themselves to be embedded. Make sure to test embedded websites thoroughly on all your apps, including whether or not the embedded content renders well when the app is in either light or dark mode.

👉 See our web content examples for help embedding common sources like YouTube.

HTML

If you have coding skills, a developer on your team, or a snippet from a third-party service then you can use HTML code as the source for web content.

🚧 This feature allows code to run directly in your web app. Only enter code that you trust.

Content placeholders

You can specify certain placeholders (listed below) in your web content that will be replaced with data about the content or the user viewing the content. This is useful for analytics or for customizing the embedded content based on the user or subscription.

🚧 Do not rely on placeholder values to display any sensitive information on your embedded page. Placeholders are not secure—for instance, anyone could visit your web content URL in a browser and send any values they want. Just because userId has a value does not mean that the viewer is actually logged in as that user.

Placeholders work for all web content, whether the source is a URL or HTML.

We support the following placeholders:

Placeholder	Description	Example value(s)
`{{userId}}`	The unique identifier of the logged-in user, or blank if the viewer is not logged in.	`a2299461-ba55-4ad8-b658-8e159606acc3`
`{{subscriptionId}}`	The ID of the logged-in user‘s current subscription, or blank if the user is not logged in or not subscribed to a plan.	`4`
`{{subscriptionPlanId}}`	The ID of the logged-in user‘s current subscription plan, or blank if the user is not logged in or not subscribed to a plan.	`2`
`{{subscriptionStatus}}`	The status of the current user‘s subscription, or blank if the user is not logged in or not subscribed to a plan.	`freeTrial` `subscribed` `paymentPastDue` `canceledWithTimeLeft` `canceled` `lapsed` `none`
`{{contentId}}`	The Treefort content ID of the web content (as displayed in your admin dashboard).	`78`
`{{displayMode}}`	The viewer‘s current device theme.	`light` `dark`

Here are some examples of placeholders in action:

Source URL:

https://www.example.com/mypage?userId={{userId}}&subId={{subscriptionId}}

Example replacements:

https://www.example.com/mypage?userId=1d6ecf66-67ef-4f37-8ba4-b29bc1d61134&subId=4
https://www.example.com/mypage?userId=&subId=
https://www.example.com/mypage?userId=b8a52ae1-a21d-495a-b741-8a57162bd2f3&subId=

Source URL:

https://www.example.com/{{subscriptionStatus}}

Example replacements:

https://www.example.com/subscribed
https://www.example.com/paymentPastDue

Source HTML:

<html>
  <body>
    <p>Your current display mode is '{{displayMode}}'!</p>
  </body>
</html>

Example replacement:

<html>
  <body>
    <p>Your current display mode is 'dark'!</p>
  </body>
</html>

Web content

Web content examples

Web content display mode

Web payment reference