Embed Code

How to Set Up the Embed Code for your Event Carousel

Share This Posts

With a Timely account, you can easily create an event carousel into your website to display events online. Once the carousel widget is installed, all changes made to your selected events are updated automatically on the carousel on your website. In this post, you will learn all the steps to set up the embed code for your event carousel.

Creating an online calendar and event widgets for your website is simple with Timely.

To highlight specific events in a fun and attention-grabbing way, consider adding an event carousel to your website. With Timely carousel view, you can showcase up to 12 events in a row of up to 4 events at a time. See it live in our events carousel widget demo page.

Displaying events on a carousel offers will make your website more interesting and engaging. Indeed, a carousel with events can improve webpage design, and the way your audience interacts with your event content.

2. Content Management Systems (CMS) Supported 

Timely‘s event platform and widgets can be embed on any public or private website or mobile application. They work perfectly with many website content platforms, including but not limited to:

  • WordPress
  • HTML
  • Shopify
  • Wix
  • SquareSpace
  • Joomla
  • Drupal
  • Magento / Adobe Commerce
  • Adobe Experience Manager
  • Weebly
  • GoDaddy
  • MicroSoft SharePoint / Power Pages
  • Agility

Regardless of the CMS you use, the general instructions to set up the embed code for your event carousel are the same. Continue reading to learn more. 

By adding an event carousel embed code on the backend of your website will allow you to publish a limited number of events on a visually appealing carousel widget. If you have a particular type of events that you want to display on the carousel, it is recommended to customize the widget embed code.

See the step-by-step instructions below:

  1. Log in into your Timely account.
  2. On the main navigation menu, click on Settings, and then on Embed Code. You can also use the shortcut on the top right corner of your dashboard.
  3. Then, a new page will open displaying all your embed code options and preferences. Currently, there are 4 embed code types you can choose from: Calendar, Carousel, Slider, and Add Event Button.
  4. Since this post is about how to set up the embed code for your event carousel, on Embed Type, choose the Carousel option.
print screen of Timely event management software carousel embed code option

If you don’t want to customize the embed code, you can go straight to the widget code section below (6. Setting Up your Carousel iFrame Embed Code). Otherwise, continue reading this post to learn more.  

Just below the Carousel embed code type option, you will see the Advanced Settings dropdown menu. These settings will be different depending on the embed code type selected.

This is how to edit your event carousel widget embed code Advanced Settings:

Max Events to Show

With this feature, you can choose to display up to 12 events in a Carousel. Simply type the preferred number of events on the box.

print screen of Timely event management software carousel max events to show option

Max Events per Page

If you wish, you can also display more than one event at the same time in your carousel. The maximum number of events that can be displayed at the same time is 4.

print screen for max event per page preview

Slider Delay Time

If you wish, you can choose the delay time for each event post displayed on the slider (in seconds).

print screen of Timely event management system slider delay time settings

Date Range

Use the date range option to select a specific date range for the events that will be displayed in your carousel. The options are the following:

  • Upcoming Events
  • Today’s Events
  • Starting Tomorrow
  • Custom date range
  • Next n days
  • Next n events

In case you want your carousel to only display events that are marked as featured in your calendar, simply check the box Featured Events.

print screen of Timely event management system carousel featured events settings

5. Filters

In addition to the advanced settings explained above, you can also showcase a carousel with filtered events. You can select your categories, tags, organizes, venues and all the other custom filters that you might have created.

print screen of Timely event management system embed code filter settings

After customizing your carousel embed code advanced settings and filters, you can go ahead and generate the embed code. Just follow the instructions below:

  1. Click the Widget code (copy it to your website) filter and choose the option iFrame Embed – Javascript.
  2. Click the Copy snippet button to copy your embed code.
print screen of Timely event management system embed code generator

Next, you just need to paste the code on the backend of your website to display your Timely event carousel. Click on the links below to see detailed instructions on how to embed the carousel widget code on the following content management systems:

For instructions on how to install Timely calendar and widgets on other CMS or mobile applications, please contact customer support.

7. Advanced Slider Embedding Option

For advanced embedding options, check our posts on how to customize server side embedding. Please note that this option is only available for certain Enterprise plans. 

For more user guidance, please go to our Help Center. If you have any questions or need additional assistance, do not hesitate to contact us. Alternatively, you can open a support ticket from your Timely account’s dashboard.