Being able to add your own HTML code inside a topic is a feature that has been requested to us. Admins want to embed custom HTML code, such as a Google Calendar embed, which is currently not supported by our Embed feature in topics.
This feature has a bunch of risks associated (outlined below), but we've decided to enable it for communities on the Professional or Enterprise plan. We hope you’ll use it wisely :)
"With great power, comes great responsibility."
- This is an advanced and experimental feature for technical folks (ideally developers) only!
- Reason: A single character gone wrong in an HTML code snippet can end up breaking your community. We're weary of folks getting into these issues, and having to support such experiences at scale.
- It's powerful! It lets you add any custom HTML or JS to a topic.
- HTML added here will most likely not work on our iOS app in its initial versions.
- We will not take any of your HTML embeds away from you if you decide to use this.
Here are a few examples:
1. Google Calendar
Here's an example of a Google Calendar inside of a topic. To embed this within your own topic, you can follow the steps below.
You can create a space that hosts just the calendar topic, pin this calendar topic to the top of a space, or pin the topic in the right sidebar of your space for easy access.
✅ Step 1: Go to Google Calendar and calendar settings
✅ Step 2: Find your embed code by going into calendar settings within Google Calendar in the "Integrate Calendar" section:
It should look something like this:
<iframe src="[<https://calendar.google.com/calendar/embed?src=69qilnk0tbt2600t0i9uac6kf5nm4927%40import.calendar.google.com&ctz=America%2FNew_York>](<https://calendar.google.com/calendar/embed?src=69qilnk0tbt2600t0i9uac6kf5nm4927%40import.calendar.google.com&ctz=America%2FNew_York>)" style="border: 0" width="100%" height="600" frameborder="0" scrolling="no"></iframe>
💡 Suggestion: change width="800" to width="100%" for a tighter layout fix, and toggle on "Hide Right Sidebar" in space settings.
✅ Step 3: Copy this over into "Custom HTML" under Edit Topic:
✅ Step 4: Click 'Save' or 'Post'
When users click on one of those calendar events, they'll have the option to add it to their calendar:
2. Add to Calendar Widget
You may post an event reminder in Circle, and want to provide an "Add to Calendar" button beneath the topic as shown below. We'd recommend using a tool like AddEvent.com to generate the "Add to Calendar" code:
Once clicked, members will be able to select their preferred calendar:
3. Embed your Calendly Widget
To embed your Calendly schedule, navigate to your Event Types tab on the home page. Hover on the settings gear and click "Add to Website".
Select the inline embed for your topic, and customize to your needs. Insert the code into your topic code and click "Save Changes".
Feel free to get creative as this will work for any kind of HTML that you'd like to place in a topic. Please contact email@example.com if you have questions.