1. Home
  2. Integration
  3. Embed Teamup Calendar in a Webpage

Embed Teamup Calendar in a Webpage

It is easy to embed a Teamup Calendar into any web site or Facebook page.  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.
  • You can assign an easy-to-remember web address to an embedded calendar.
  • You can reach a wider audience.
  • You can keep your personal or business branding consistent.

How to embed a Teamup calendar

You can embed a Teamup calendar by using our embed wizard (details below). If you are using WordPress, you can use our Teamup plugin for WordPress to embed your calendar.

Our Embed Wizard makes it easy to embed a Teamup Calendar into your website. You’ll be using the iframe tag — but don’t worry, you don’t need to write any code. Our embedding tool will do all the work for you.

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. Note: you need to have a calendar administrator link to access the Settings. Create a read-only link. Customize it, if you would like, to share only selected sub-calendars.

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.

Step 2.  Use the Embed Wizard to generate the embed code

Go to teamup.com/embed to access the Embed Wizard.

Copy and paste the link from step 1 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 embed code from the button in the top left.

Step 3.  Insert the iframe code 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 iframe code. The result should look like this:

Learn more:
Updated on October 23, 2019