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.
2. Advanced Settings
Under Advanced Settings, modify any necessary changes, including the Date Range and Default View of 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.
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.
4. Click on the block inserter tool next to the content area where you want to place the calendar, and select Custom HTML block:
5. After adding the Custom HTML block, paste the previously copied Timely embed code into the Write HTML... field:
6. Update the changes and the calendar will appear on your WordPress page.
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.
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.
5. Add your Timely embed code in the text field.
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:
2. Click the element and the Edit Custom HTML option:
3. And paste the Timely embed code you created:
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.
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
6. 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.
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.
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.