Embed Code

How to Add Events Calendar and Widgets to a Wix Website

Share This Posts

With a Timely account, you can promptly and effortlessly incorporate a calendar with events and widgets onto your Wix webpages. Simply copy a code snippet and paste it to the back end of your website. Once embedded, any changes or updates you make in your Timely dashboard will automatically appear on your site. Furthermore, you have the option to use the online calendar to accept reservations, and sell tickets to your events. This guide walks you through two methods for embedding your Timely calendar into a Wix website, depending on whether you’re using a free or PRO (paid) Wix plan.

1. What is Wix?

Wix is a cloud-based web-building platform. It gives you the ability to customize websites through the use of various templates and a simple drag-and-drop HTML5 editor. With Wix, you can utilize various apps, graphics, image galleries, fonts, vectors, animations and more. Moreover, Wix users have the choice to start their website from scratch.

If you have already established or are intending to create an online calendar for Wix, this post will show you how to add a Timely events calendar on a Wix web page. Keep reading to learn more.

2. Full Calendar vs Widgets Embedding

Timely event calendar software is an incredibly convenient and efficient way to organize and promote events on Wix. With a wide variety of calendar views available, you can customize the experience to create a full-scale calendar or opt for a mini calendar widget.

A full-scale calendar usually spans an entire Wix page. Being an expansive calendar version allows room for several calendar functions, such as date and keyword search, calendar subscription, and filters.

print screen of Timely poster board full calendar view
Posterboard full calendar view

The mini calendar widget views are smaller and require less space. Usually they only display a limited number of upcoming events, and have no search or filtering functions.

example of Timely calendar widget stream view or mini calendar
Stream calendar widget view
example of Timely calendar widget stream view or mini calendar
Modern row calendar widget view

Additionally, you can use Timely slider and carousel widgets to further spruce up the design of your Wix site. These widgets can definitely help you showcase your events in an attractive way.

All options can be embedded individually or together to create a seamless experience for your website visitors.

3. Before You Begin

Before embedding your Timely calendar or widgets in Wix, make sure you:

  1. Log in to your Timely dashboard
  2. Locate your Public Calendar URL (e.g., https://events.timely.fun/xxxxxxx/posterboard)
Public Calendar shortcut within Timely's dashboard
  1. Decide whether you’re using a Free or PRO (Premium) Wix account
  2. Determine the view you want to embed (full calendar, stream, slider, carousel, etc.)

4. How to Add Full Calendar Views to a Wix Page – Free Plan

If you are using the free Wix plan, you can embed your calendar using the Embed HTML feature. This allows you to display your Timely public calendar URL directly on your page using a basic embed tool. This method allows you to display your Timely public calendar directly on your site.

Once you have the calendar URL ready, follow the instructions below:

  1. Log in to your Wix account.
  2. Inside Wix Website Editor, select the page where you want to embed the Timely calendar.
  3. Click on Add Elements, then scroll down to Embed Code, and click on Embed HTML.
Wix Website Editor add elements area
  1. Drag the Embed HTML element into the page layout.Click on Add Elements, then scroll down to Embed Code, and click on Embed HTML.
Wix HTML Settings
  1. In the settings panel, choose Website Address, then paste your Timely public calendar URL (e.g., https://events.timely.fun/xxxxxxx/posterboard).
  2. Click Apply.
  3. Resize the embed box as needed to ensure the calendar displays properly on desktop and mobile.
Timely's calendar embed overview on Wix

You can also change the final part of the URL to display other views:

  • Stream view: /stream
  • Slider view: /slider
  • Carousel view: /carousel

5. How to Add Full Calendar Views to a Wix Page – PRO Plan Only

Please note the instructions below are only available to Wix PRO (Premium) users. If you’re using the free version of Wix, follow the previous section using Embed HTML instead.

Once you have the calendar URL ready (as explained above), follow the instructions below to install a Timely calendar on your Wix website:

  1. Log in to your Wix account.
  2. Inside Wix Website Editor, select the page where you want to embed your Timely calendar.
  3. Click on Embed, and then on Custom Embeds. Next, add a Custom Element.
print screen of wix website highlighting where to add a custom element
Custom element embedding on Wix dashboard
  1. Select Choose Source. Then, set the Server URL option with the value: https://events.timely.fun/embed-wix.js
print screen wix custom element
  1. Select Set Attributes and set at least the attribute data-src with your Timely public calendar url (for example, https://events.timely.fun/xxxxxxx/posterboard). For the calendar to be responsive in smaller screens, set the data-width with the value “var(–customElementWidth)”. Also, if you wish, you can stretch the calendar section to full width to improve visibility.
print screen wix elements
  1. Save your changes, and then go to the front end of your Wix site. There, you will see that your Timely calendar has been properly installed, according to your embed code settings. If you still don’t see the calendar, try logging out of Wix.

6. How to Add Widgets to a Wix Website

In order to feature a mini calendar widget on your Wix page or website, you must first customize your Timely calendar URL by replacing the last section of the URL with the name of the desired calendar view. For example, if you want to create a Stream View calendar widget, the applicable calendar URL is https://events.timely.fun/xxxxxxx/stream.

For slider and carousel, although Wix works with link embedding and not code embedding, first you will need to set up the necessary embed codes for these widgets. If you are unsure how to do so, refer to the instructions outlined on the following user guide posts:

Once the embed codes are ready, you can just modify your public calendar URL by replacing the view name to either carousel or slider. For instance, https://events.timely.fun/xxxxxxx/slider and https://events.timely.fun/xxxxxxx/carousel.

With your widgets URL on hand, follow the same instructions provided in this post above to add them to the desired web page. The only difference is that, when creating the page, you will have to limit the dimensions of the embeddable area in advance. In doing so, you will ensure the widget appears in the correct place on the page.

example of a carousel widget installed on a website
Example of a carousel widget installed on a website

Embedding your Timely calendar or event widgets on a Wix website is a simple and effective way to keep your audience informed and engaged. Whether you’re using a full calendar view to display all your events or a widget to highlight upcoming ones, Timely offers the flexibility to match your website’s design and goals.

By following the steps outlined in this guide, you can create a seamless integration that automatically updates as you manage your events within Timely. Plus, with features like online bookings, ticket sales, and RSVPs, your calendar can become a central part of your event promotion strategy.

Need Additional Help?

For further guidance and support, please visit our Help Center. Additionally, if you have any inquiries or need assistance, don’t hesitate to contact our customer success team by opening a support ticket from your Timely account’s dashboard.

Moreover, in case you require additional assistance in implementing and using Timely event management system, we are happy to assist. Explore all the professional services we offer, and feel free to get in touch with us today!