If you're using Foleon for event communications, you might want to create a sense of urgency by sharing a countdown to the event date. In this article, we show you how you can do that with the embed element.
In this example, we're embedding Free Countdown Timer Widget. This is a free online tool that allows you to embed a countdown.
💡There are paid tools out there that allow you to change the countdown to fit your branding — e.g., Elfsight. Whichever tool you're using, the workflow of this article will also apply.
First, customize the style of the widget and set the end time of your countdown.
Next, click embed on your website, and you'll see a script appear. For example:
//<script src="https://cdn.logwork.com/widget/countdown.js"></script>
<a href="https://logwork.com/countdown-1353" class="countdown-timer"
data-timezone="Europe/Amsterdam" data-date="2023-09-21 13:19">Countdown Timer</a>
From this script, you need to copy the source URL of the countdown. In this case, that's https://logwork.com/countdown-1353.
Open one of your Foleon Docs and drag the embed element onto your page.
💡If you're working with the Content Builder, you can't drag an element onto your page. Instead, select one of the embed templates.
Paste the URL you've copied into the embed element URL field. Preview the embed and click save.
You've now successfully embedded the countdown into your Foleon Doc. It's now up to you to style the embed to your liking.
Depending on the type of tool you're embedding, there might be some information included in the embed that you don't want to show to your audience.
Open the element settings by clicking the cogwheel icon of your embed. In the general settings, go to the size settings and change the height of the embed.
By reducing the height of our embed from 550 to 200, we have a countdown that does not have any unnecessary information.
That's it. Make sure to check your countdown in the preview.