Organizations
Calendar Meetings

Calendar Meetings Integration Guide

Embedding HeyPeers meeting calendars into your website is simple and straightforward. You can do this by using an iFrame HTML element. This guide will walk you through the process and the parameters that can be customized.

Basic iFrame Embedding

To embed a HeyPeers calendar, you can use the following sample iFrame code:

<iframe src='https://heypeers.com/organizations/{your_organization_id}/scheduled_meetings' width='100%' height='750px'></iframe>

Customizable Parameters

In order to match with your website's desgin HeyPeers allow some customization to the iFrame. And you can customize the iFrame by adding query parameters to the src URL. Below are the parameters you can customize:

heading

  • Description: Sets the heading of the calendar.
  • Example: &heading=Our%20Upcoming%20Support%20Groups

hide_heading

  • Description: Determines if the heading should be hidden. Accepts boolean values true or false. The hide_heading params will always overwrite heading param.
  • Example: &hide_heading=true

background_color

  • Description: Sets the background color of the calendar.
  • Example: &background_color=%23e0f2f1

URL Encoding

It is crucial to encode certain characters in the URL parameters to ensure that they are processed correctly. For example, in the background_color parameter, instead of using the # sign for the color, you should use %23. This is known as URL encoding, and it ensures that the URL is correctly interpreted by web servers.

You can use JavaScript's encodeURIComponent() function to encode parameters:

const heading = encodeURIComponent('Our Upcoming Meetings');
const backgroundColor = encodeURIComponent('#e0f2f1');

Complete Example with Parameters

<iframe 
    src='https://heypeers.com/organizations/{your_organization_id}/scheduled_meetings?&heading=Our%20Upcoming%20Groups&hide_heading=true&background_color=%23e0f2f1'
    width='100%'
    height='750px'></iframe>

Best Practices

  • To optimize the visual experience, allocate the maximum available width on your web page for the iFrame. This can be implemented whether you're creating a dedicated page for the iFrame or incorporating it as a section within an existing webpage.
  • For optimal usability, set the minimum height of the iFrame to at least 650px.
  • It's a good idea to URL-encode any parameters that may contain special characters to ensure that they are processed correctly by HeyPeers. This ensures that the iFrame will behave as expected.
Single Sign-On (SSO)