Integrations

Embed a calendar in Client Portal

Embed any calendar that provides embed or iframe code — Google Calendar and other calendar tools — into a content page so your clients can see it without leaving the portal. This guide walks through the steps with Google Calendar, the most common option, but the same Custom HTML method works for any calendar that gives you an embed snippet.

The embedded calendar is read-only for portal viewers: it displays your calendar, it doesn't let clients schedule or edit events. Depending on the embed code, Google's own viewer controls (navigation, or subscribing with Add to Google Calendar) may still be available.

How calendar embeds work in Client Portal

Client Portal has no dedicated calendar module. You embed a calendar into a Content Page using the WordPress Custom HTML block, which accepts any provider's embed or iframe code. Google Calendar is the most common example, but the same steps apply to any calendar that lets you copy embed code.

Make your Google Calendar public

For the calendar to be visible to everyone, Google requires it to be public. In Google Calendar on a computer:

  1. Open Settings.

  2. Select the calendar you want to embed.

  3. Under Access permissions for events, turn on Make available to public.

  4. Choose whether to show all event details or only free/busy (hide details).

Google Workspace administrators can restrict these sharing settings.

Get the embed code

Copy the embed code from Google Calendar on a computer — the mobile app doesn't offer it.

  1. Open Settings.

  2. Select the calendar.

  3. Select Integrate calendar.

  4. Under Embed code, select Customize.

  5. Choose your display options.

  6. Copy the generated embed code.

Google recommends setting both width and height to at least 500 in the customization interface.

Add the calendar to a content page

Add the embed code to a Content Page using a Custom HTML block. Create the content page from Client Portal → Content Pages → Add New, or from the portal editor by setting a Modules block's module type to Content Page.

  1. Open the content page in the WordPress block editor.

  2. Type /html and select Custom HTML.

  3. Paste the Google Calendar embed code.

  4. Preview or publish the content page.

Adjust the calendar size

Client Portal doesn't set a fixed height for embedded calendars, so the iframe's width and height attributes control how it displays. Edit them in the Custom HTML block:

  • Width: Use 100% to fill the content area.

  • Height: Set a fixed pixel value (for example 900px). height:100% can render unreliably across browsers.

For a wider calendar, you can remove the portal sidebar from the content page by turning off Display Sidebar in the editor's Layout Settings.

Common issues

The calendar doesn't show

If the calendar appears blank, it isn't public. Return to Settings, select the calendar, and turn on Make available to public under Access permissions for events.

The calendar is too small or cut off

Adjust the width and height attributes in the Custom HTML block. Google recommends a minimum width and height of 500.

The calendar doesn't fill the page height

Set a specific height in pixels instead of height:100%, which can be unreliable across browsers.

Was this helpful?
Was this helpful?