You can display your calendar on other websites with a copy-and-paste embed code. It’s like a super widget that you can place on any website and on as many web pages as you’d like.
To get started, log into your Loxi account and navigate to the Export / Embed Settings screen.
This screen displays a preview of your calendar widget along with a set of options you can use to customize its appearance.
Embed Preview
As you make changes to the Appearance, Filters and Features settings (which we’ll cover in just a bit), the preview will automatically update, giving you a real-time preview of how things will look.
Curious to see how your calendar looks on a mobile device or a tablet? There are buttons located at the top of the screen that allow you to preview how the widget will look on different screen sizes. Note that this feature is available only on desktop-sized screens.
Embed Settings
The control panel allows you to customize the calendar widget so that it matches the look and feel of the website where it will be embedded.
Pro tip: These settings will only impact the embeddable widget you are creating at that exact moment. Nothing else. So feel free to experiment!
Appearance
1. Choose the Calendar Default Layout
Do you want the widget to default to Month View or List View? This setting lets you choose by selecting the option from a drop-down.
2. Select a Color Theme
This setting changes the primary color of the widget.
We’ve set you up with a few options we think look good right out of the box, but you can choose a custom color using a color picker or by specifying a Hex color that matches the exact primary color of your website.
3. Select a Theme
Light or Dark, they both look fantastic. Give them a spin!
4. Select a Font Family
We have hand-picked a few fonts that look great with Loxi and provide a variety of options to match the style of your website. Try them out and select your favorite.
5. Show List View Image
6. Disable the background?
You might prefer a transparent background in order to have more control over the look and feel of the calendar embed. This basically removes the light or dark background color from the color and allows the background of your website to show through seamlessly.
Filters (Categories and Venues)
These settings allow you to filter the events displayed on the calendar.
Events in all categories and all venues are the default.
Choose a category or a venue and only those events will show up in the widget.
Pro tip: Let’s say your calendar is full of concert events that are categorized by music genre. You can embed a widget on one webpage that only displays Rock and creates another widget on a different webpage that only displays Polka … if you’re into that kind of music.
Features (On/Off)
Don’t want to display the search field in the navigation? Or the Location filter? Or hide everything altogether? These options let you do just that.
- Events Search. If enabled, the Search field will be displayed in the calendar navigation.
- Category Filter. If enabled, the Category filter will be displayed in the calendar navigation.
- Location Filter. If enabled, the Location filter will be displayed in the calendar navigation.
- View Switcher. If enabled, visitors will be able to switch between Month and List View. Disable this to limit the calendar to a single view.
The Embed Code
Once you have configured the widget settings, click on the Get Embed Code button located at the bottom of the settings.
Code Snippet
The snippet is basically a chunk of HTML code that you can add to your website.
Copy the snippet and paste it into the HTML or source code of your website and it will generate the calendar when the webpage loads.
Pro tip: This method is the preferred way to embed your calendar because it displays the calendar exactly how it was configured in the Embed settings.
Manually Editing the Embed Code
You’ll notice that the code snippet includes values in it. If you’re comfortable editing code, then you can change those values to customize your calendar embed without having to go back into the Embed Settings screen.
| Attribute | Value | Notes |
|---|---|---|
data-background-color |
empty or transparent |
|
data-categories |
all, none, [numeric] |
Category id number e.g. 2 |
data-color |
[hex code] |
e.g. #7fc11c |
data-default-layout |
list, month |
Calendar default layout |
data-font-family |
Roboto (default), Cardo, Poppins, Oswald |
|
data-show-category-filter |
1, 0 |
1 = on, 0 = off |
data-show-location-address |
1, 0 |
1 = on, 0 = off |
data-show-location-filter |
1, 0 |
1 = on, 0 = off |
data-show-search-filter |
1, 0 |
1 = on, 0 = off |
data-show-view-switcher |
1, 0 |
1 = on, 0 = off |
data-show-list-view-image |
1, 0 |
1 = on, 0 = off |
data-theme |
light, dark |
|
data-venue |
all, none or [numeric] |
Venue id number e.g. 2 |
Troubleshooting Embeds
If your calendar fails to load on a webpage, we will display a link to your calendar instead. This can happen for a few reasons.
1. The Content Management System Doesn’t Support It
Some content management systems do not allow third-party JavaScript, iFrames or other types of embedded content, often as a measure to protect you and your site from malicious software. That’s great as far as security goes, but is definitely a limitation that Loxi is unable to work around.
2. Some of the Code Snippet is Missing
It might be possible that the snippet was not fully copied and pasted. Make sure the entire snippet was selected and that it entered into the webpage in full.
3. Web Browser Settings are Blocking It
Many web browsers allow users to select a setting to block JavaScript. Most users do not enable this setting, but the calendar would most certainly be blocked if it is.