It’s easy to embed a Teamup Calendar with iFrame code or link. You can customize the look of the embedded calendar by choosing the options in the Embed Wizard or appending link parameters to the URL for embedding. Demonstrated below is an example of this link embedded here.
Note the link parameters after ? in the URL that make the respective UI elements invisible, achieving the simple and sleek look that blends with the webpage.
Advantages of an embedded calendar
With an embedded calendar, you can make your shared Teamup Calendar available under your existing personal or business brand. Doing so can be an advantage for several reasons:
- The embedded calendar can correspond to an existing web presence.
- Assign an easy-to-remember web address to an embedded calendar.
- Reach a wider audience.
- Provide a visual display of events.
- Keep your personal or business branding consistent.
See this gallery of live embedded calendars for examples and ideas.
Embedded calendar examples
Visual event display
Many embedded calendars are used to share events with a group, community, or with the public. Tiles view provides a polished display of events that’s perfect for this scenario. Each event is shown in its own tile. Tile size can be set to small, medium, or large. If the event has an image uploaded, it will be used as the cover image for the even tile.
Here’s the embedded Teamup Ticker calendar in Tiles view:
A minimal look
It’s often helpful to disable elements that aren’t specifically needed on the embedded calendar. A minimal interface is easier for users to navigate. See many examples in our gallery of live embedded calendars.
Here is an example of an embedded calendar with several elements hidden (view selector, search, menu, and profile info) and the side panel closed:
How to embed a Teamup calendar
Here are the basic steps:
- Generate a secure (read-only) calendar link.
- Use our Embed Wizard to generate iFrame code or a customized link.
- OR, add link parameters to customize the look and feel yourself.
- Insert the customized link or iFrame code into your website’s HTML editor.
See more details below.
Generate a secure link
Typically, it is best to embed a read-only version of your calendar onto your public website. This helps maintain the security of your calendar. Only use a modify or add-only version of your calendar if you want your users to be able to add or modify events to the embedded calendar.
- From your calendar, go to Settings > Sharing.
Reminder: to access calendar settings, you must have administrator access and use a browser. Calendar settings are not the same as user account settings.
- Click on Create Link.
- Scroll to the Calendars Shared section.
- Choose which sub-calendars to share and set the access permission:
- Choose All calendars to include all sub-calendars in the embedded calendar, then assign the Read-Only permission, OR
- Choose Selected calendars to share only certain sub-calendars, then assign the Read-Only permission to shared sub-calendars, and the Not shared permission to sub-calendars you do not wish to include.
Alternately, you can use an existing calendar link. Most calendars have a Reader link (pre-configured in Settings) which displays all sub-calendars at a read-only permission. You can use the pre-configured link or another one which contains the sub-calendars at an appropriate permission level for public access.
Link parameters
You can use the secure link as-is or use the Embed Wizard to generate iFrame code or a customized link. Or you can append link parameters to customize the link prior to embedding.
Link parameters are key=value pairs that are appended at the end of a calendar link. For example, you can add link parameters to set the initial calendar view, configure the start date, set the language, and hide the side panel.
See more about using link parameters to customize an embedded calendar.
Use the Embed Wizard
Our Embed Wizard makes it easy to embed a Teamup Calendar into your website. Don’t worry, you don’t need to write any code. Our embedding tool will do all the work for you. You can use the output as iFrame code or a URL.
- Go to teamup.com/embed to access the Embed Wizard.
- Type or paste in the secure link and click the green OK button.
- Now you can work with the many options to customize the embedded calendar.
- Once you are done, copy the iFrame code or URL to insert into your website.
Customize with the Embed Wizard
The Teamup Embed Wizard has two sets of options you can use to customize an embedded calendar. As you make changes, the calendar will show your changes in the preview window on the right.
- In calendar appearance options, on the left (Calendar icon), you can set the calendar size, customize the header, and control calendar elements like the side panel and date controls.
- In the calendar settings options, on the right (Gear icon), you can set calendar view options, adjust the start date, and set the language and time zone.
Copy the iFrame code or URL
Once you have the options set as needed, click into iFrame or URL, then click the blue Copy button:
Here’s an example of iFrame code (from the minimal look example, above):
<iframe src="https://teamup.com/ksjuaatozg752texmh?showSearch=0&showProfileAndInfo=0&showSidepanel=0&disableSidepanel=0&showViewSelector=0&showMenu=0&showAgendaHeader=1&showAgendaDetails=0&showYearViewHeader=1" style="width: 100%; height: 800px; border: 1px solid #cccccc" loading="lazy" frameborder="0"></iframe>
Insert the iFrame code or link into your website
On your website, access the html editor in your website’s content management system. Most content management systems allow you to access the html editor when you are creating or editing a new post or page. If you are unsure how to do this, talk to your website administrator for help.
In the html editor, insert the URL or the iframe code. The result should look something like this:
See this calendar in a new window to compare the calendar with the embedded version.