GuideReference

Integrating via iFrame

Embedding Pencil Spaces via iFrame allows you to incorporate all the power of Pencil Spaces into your application, without disrupting your existing user workflows.

This guide covers essential guidelines, permissions, user authentication options, and branding capabilities to help you embed Pencil Spaces correctly.

Permissions policiesCopied!

To ensure a smooth and secure iFrame integration, ensure that you allow the following permissions in your iFrame permissions policy:

  • camera / microphone: Enables video and audio access on your devices

  • display-capture: Allows screen sharing

  • clipboard-read / clipboard-write: Enables copying and pasting from the clipboard

  • picture-in-picture: Supports picture-in-picture mode within the iFrame.

  • autoplay: Allows for sound to play automatically if the user joins a Space but has not yet interacted with the page

  • fullscreen: Allows users to expand Pencil Spaces in full screen.

Example

<iframe
  src="https://my.pencilapp.com/spaces/XYZ"
  width="100%"
  height="100%"
  allow="clipboard-read; clipboard-write; display-capture; fullscreen; autoplay; camera; microphone; picture-in-picture">
</iframe>

Standalone modeCopied!

We offer a "Standalone Mode" option that can be enabled via Settings > API (live) or via URL param (coming soon)

When this mode is active, we remove navigation links outside the Space, preventing users from accessing Spaces Manager. We also hide functions like "Copy Link" and "Invite Users," ensuring all user management is handled programmatically by your application.

User authenticationCopied!

For streamlined SSO, Pencil Spaces provides API-managed authentication. This approach allows institutions to fully control user access programmatically.

To get started, you can use our /user/createAPIUser endpoint to create a new API user, and our /user/authorize endpoint to authorize an API user.

API users can be reused across multiple sessions for easier user management. Authentication tokens are valid for one hour and can be appended to the URL as shown below:

https://my.pencilapp.com/spaces/XYZ?loginMethod=token&loginType=api&token={token}

CustomizationsCopied!

We support the following customizations supplied as URL params:

  • startCall=true - When set, we automatically launch the call if the user is a host in the Space. If the user is a participant, this parameter is ignored.

  • gv=true - When set, the Space is defaulted to gallery view.

    • This will not override leader mode if leader mode is active in the Space.

    • If there is no call in the Space, the user will be automatically switched to gallery view after the call starts.

  • Coming soon: standalone=true - When set, standalone mode is enabled a particular Space, overriding your institution’s default.

  • Coming soon: language={code} - When set, the user interface is translated into the target language defined by code. Please provide language codes in ISO 639-1 format (e.g., fr for French). A full list of supported languages can be found in the language selector when you go to Settings > Profile > Languages.

Branding and themingCopied!

Depending on your plan, Pencil Spaces offers a range branding and theming options to match your organization’s identity. These include custom logos, color schemes, and personalized UI.

Contact Pencil Spaces support for more information and assistance with set-up.