Summary: Effortlessly integrate the Tithely Calendar into your website or share it with Google using this comprehensive guide. Learn how to generate your custom embed code, customize its appearance, and embed it directly onto your website (including Tithely Sites) to streamline your church's scheduling.
Before You Begin
- App Display Note: If someone is viewing the calendar within the Tithely mobile app, it will automatically show up in List mode for better mobile visibility.
- Website Compatibility: The embed code provided by Tithely can be placed on almost any church website builder that accepts standard HTML embed codes (iframes).
Step-by-Step Instructions
Part 1: Generate the Tithely Embed Code
- Navigate to the Events tab. Log in to your Tithely account and select the "Events" tab from the top right navigation menu.
- Access the Calendar Settings by clicking the gear icon located in the top right corner next to the "Add Event" button.
- Select Embed Calendar on Website from the dropdown menu to generate your custom HTML code.
- Customize your code (Optional).
- Click "Show Options" in the bottom left corner to customize the view (grid vs. list), adjust the size and color, and select whether to include all calendars or specific ones.
- Copy the iframe/embed code provided.
Part 2: Embed the Code on Tithely Sites
If you are using Tithely Sites, follow these specific steps to embed the code you just generated. (If using a third-party builder like WordPress or Squarespace, paste the code into their respective HTML/embed block).
- Navigate to your Tithely Sites dashboard.
- Create a new page by going to Content, selecting Pages, and clicking Add a Page. Name it (e.g., "Church Calendar").
- Add a Legacy block to the new page. (Using the Legacy block typically performs best when inserting an iframe).
- Click into the text box of the Legacy block and click the Source code button (usually represented by a
< >icon) to open the source code window. - Paste your copied iframe embed code into the source code area and click Save or OK.
- Save the block and publish your page to view the live calendar.
Alternative Method: Integrate with Google Calendar
Alternatively, you can push your Tithely calendar out to a Google Calendar, and then embed that Google Calendar onto your website. With this method, your Tithely Events will automatically sync and show up within the Google Calendar interface. For more detailed information on setting up this specific integration, please see our guide on External Calendars.
Troubleshooting & FAQs
- [Why are internal/private calendars showing up on my public website?]: If you embed the standard calendar code, any new calendar you create in Tithely will automatically become visible on your website. Best Practice: We highly recommend clicking "Show Options" when generating your embed code to explicitly select only the specific calendars you want displayed publicly. If you ever add a new public calendar to your account, you will need to generate and paste a new embed code to ensure it displays correctly.
- [The embed code is showing up as text instead of a calendar on my Tithely Site]: You must click the "Source code" button (the
< >icon) in the text editor to open the correct area for pasting HTML. If you paste raw code directly into the regular visual editor, the system will treat it as standard text.