Did You Know?

Quick answers to common questions

How can I embed HTML or JavaScript within posts?

Author: hackwhat 247 views

Being able to add your own HTML code inside a post is a feature that has been requested from us. Admins want to embed custom HTML code, such as a Google Calendar embed, which is currently not supported by our Embed feature in posts.

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.”

Please note:

  • This is an advanced and experimental feature for technical folks (ideal developers) only! 
    • Reason: A single character gone wrong in an HTML code snippet can end up breaking your community. We’re wary 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 post.
  • 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.

🚨 This is an advanced feature and intended for developers only. Unfortunately, our support team cannot help with custom HTML code.

Here are a few examples:

1. Google Calendar

Here’s an example of a Google Calendar inside of a post. To embed this within your own post, you can follow the steps below.

You can create a space that hosts just the calendar post, pin this calendar post to the top of the space, or pin the post 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 Post:

✅  Step 4: Click ‘Save‘ or ‘Post

2. Add to Calendar Widget

You may post an event reminder in Circle, and want to provide an “Add to Calendar” button beneath the post as shown below. We’d recommend using a tool like AddEvent.com to generate the “Add to Calendar” code:
When users click on one of those calendar events, they’ll have the option to add it to their calendar:

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 post, and customize it to your needs. Insert the code into your post 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 post.