Embed Code

How to Set Up the Embed Code for your Event Slider

Share This Posts

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

1. Benefits of Having an Event Slider on Your Website

Taking advantage of an online events calendar is simple with Timely. To highlight specific events, we recommend adding a beautiful and engaging event slider to your website.

Timely event slider widget is an impactful way to show events on your website. Using the slider view, you can display events as a slideshow. The slider will show one event per slide, increasing event awareness and engagement. See it in action in our event slider widget demo page.

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 slider are the same. Continue reading to learn more. 

3. Setting Up Your Event Slider Embed Code

By adding an event slider embed code on your CMS will allow you to publish a limited number of events on a beautiful slider widget. If you have a particular type of events that you want to display on the slider, 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 slider, on Embed Type, choose the Slider option.
print screen of Timely event management software slider 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 Slider iFrame Embed Code). Otherwise, continue reading this post to learn more.  

4. Advanced Settings

Just below the Slider 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 slider widget embed code Advanced Settings:

Max Slider Width

With this feature, you can select the maximum width for your slider according to the available space for this widget on your webpage.

print screen of Timely event management system max slider width settings

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

If you wish, you can choose the date range of the events that will be displayed on your slider widget. The options are the following:

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

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

print screen of Timely event management system slider featured events settings

5. Filters

Moreover, you can decide which events to show in the slider by applying your preset filters. You can select your categories, tags, organizes, venues and all the other custom filters that you might have created. This will help you to show only the events that you want your customer to see.

print screen of Timely event management system slider filter settings

6. Copying Your Slider iFrame Embed Code

After customizing your slider 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 slider embed code generator

Next, you just need to paste the code on the backend of your website to display your Timely slider. Click on the links below to see detailed instructions on how to embed the slider 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.