How To Embed Timely Calendar on your Website

With a Timely account, you can easily embed an events calendar into your website to display events online. Once the calendar is embedded, all changes made to your published events are updated automatically on your website. Learn all the steps to embed it on your site in this article. 

Timely's event platform can be embed on any public or private website or mobile application. It works perfectly with many website content platforms, including HTML, WordPress, SquareSpace, Wix, Shopify, BigCommerce, Weebly, Joomla, Tumblr and Drupal.

For general instructions on how to embed a Timely calendar of events on your site, you can either watch this short video tutorial, or review the step by step description below. Your choice!

1. Embed Code

Click on the Embed Code shortcut on the top right of your dashboard in order to get access to your calendar’s embed section. From the Type dropdown menu, make sure you select the Calendar option. 

print screen of embed code settings to embed your calendar

2. Advanced Settings

Under Advanced Settings, modify any necessary changes, including the Date Range and Default View of your calendar.

print screen of advanced settings to embed your calendar

3. Using Filters

If you wish, under the Filters tab, you can filter down the calendar view by displaying only some certain events, instead of displaying the entire calendar.

print screen of filters settings to embed your calendar into your website

4. Embed the Calendar on your Website

Once all the necessary changes are done, copy the Widget code and paste it into your website page. See below detailed instructions for WordPress, SquareSpace, Weebly, Wix and Drupal websites.

For instructions on how to embed your calendar on all other content management systems (CMSs) or mobile applications, please contact support.

4.1. WordPress Websites

For WordPress users, please follow the detailed instructions below:

1. Log in to your WordPress dashboard.

2. Click Pages, from the navigation menu.

3. Choose the page you want to edit, and you’ll be directed to the WordPress visual editor.

print screen of WordPress dashboard

4. Click on the block inserter tool next to the content area where you want to place the calendar, and select Custom HTML block:

print screen of WordPress Block options

5. After adding the Custom HTML block, paste the previously copied Timely embed code into the Write HTML... field:

print screen of WordPress Custom HTML block

6. Update the changes and the calendar will appear on your WordPress page.

print screen of WordPress visual editor

 

4.2. SquareSpace Websites

For SquareSpace users, please follow the detailed instructions below:

Squarespace All plans:

1. Log in to your Squarespace account.

2. In the Home menu, click Pages.

3. Select the page you want to edit and click Edit in the top-left corner.

4. Hover over the section where you want to add the block, click an insert point and select Embed from the menu.

print screen of SquareSpace insert points
5. Enter the URL of the item you're embedding. In other words, your Timely's standalone calendar link. Example: https://events.timely.fun/xxxxxxx/posterboard
 
print screen of SquareSpace embed options

6. Save the changes and the calendar will appear. If you still don't see the calendar, try logging out of Squarespace.

 

Squarespace Business and Commerce plans

1. Log in to your Squarespace account.

2. In the Home menu, click Pages.

3. Select the page you want to edit and click Edit in the top-left corner.

4. Hover over the section where you want to add the block, click an insert point and select Code from the menu.

print screen of SquareSpace code option

5. Add your Timely embed code in the text field.

print screen of SquareSpace embed code option

6. Save the changes and the calendar will appear. If you still don't see the calendar, try logging out of Squarespace.

4.3. Weebly Websites

For Weebly users, please follow the detailed instructions below:

1. You need to use the Weebly Embed code element to embed the Timely code. First, drag the element to your page where you want to show the calendar:

print screen of weebly dashboard showing where to add the embed code

 

2. Click the element and the Edit Custom HTML option:

print screen of weebly dashboard showing where to edit custom HTML

3. And paste the Timely embed code you created:

print screen of weebly dashboard showing how to add the embed code

 

4.4. Wix Websites

For Wix users, please follow the detailed instructions below:

1. Log in to your Wix account.

2. In the Home menu, select a site to edit and open its dashboard.

3. Click Edit Site in the upper right corner.

4. Hover over the section where you want to add the strip, and click Add. Then, select Embed from the left menu and Embed a site.

print screen of Wix strip embed options

 

5. Once you've added the Embed strip, click the Change Website Address button, and enter your Timely's standalone calendar link in the What’s the website address? Example: https://events.timely.fun/xxxxxxx/posterboard

print screen of Wix embed options6. Update the changes and the calendar will appear.

4.5. Drupal Websites

For Drupal users, please follow the detailed instructions below:

1. Log in to your Drupal dashboard.

2. In the top menu, click Content.

3. Click on the page where you want to embed the calendar.

print screen of Drupal content dashboard

4. When you open the Edit Basic page, click the Source option, and select the Full HTML text format after which you can paste the previously created and copied Timely embed code.

print screen of Drupal Basic Page editor

5. Save the changes and the calendar will appear on your Drupal page.

5. Advanced Calendar Embedding Options

For advanced calendar embedding options, check our posts on how to customize server side embedding or add a custom domain.

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.

See more:

Event Management Software (Journey + WP v.3 new platform)

© 2022 Timely. All right reserved.
magnifiercross