Embed Sparkup in your website or event app

With an embedded Sparkup session, you can enjoy the full Sparkup experience directly from your website or application.

We'll look first at how to retrieve your session link and then at how to integrate it. In this article:

• Deeplink to enter a session
• Player mode integration
• Full mode integration
• Interactivity mode integration

Deeplink to enter a session

Once you've created your session, you can use what's known as a “deep link”, which looks something like this:

https://sparkup.events/connect/ABCDE , where "ABCDE" is your session code.
(or https://alias.sparkup.live/connect/ABCDE depending on your sparkup URL)

Here's how to retrieve this link from your Sparkup session:

1. Open the General menu,
2. Copy the participant URL from your session.

With this link, your participants will enter Sparkup directly into the session, without having to enter the session code.

To this link, you can also add certain parameters to suit your requirements:

• "embed" : if set to true (recommended), profile information from first connection + background, title and logo of the session will be hidden,
• "mode" : there are 3 possible modes:
  • player -> integrates the video player part of Sparkup only, while benefiting from interactivity + emojis, camera and raise-your-hand buttons (no Chat, no participant Menu),
  • full -> integrates the whole Sparkup interface (including Participant & speaker chats, screensharing button and participant Menu),
  • interactivity -> only includes live interactivity such as live questions, word clouds...
• "remote" : defines if the participants will be onsite, in remote or they need to choose it on their side (general link). When you copy/paste your link you already choose which one you need
  • true (remote link) -> participants will be set in remote, so they will have the remote features (stream, camera, microphone)
  • false (on site link) -> participants will be set on site, so they won't have the remote features (stream, camera, microphone)
  • not used (general link) -> participants will need to select themselves if they are remote or not.
• If you wish to dynamically complete the participant profile:
  • "email" -> participant email (mandatory),
  • "firstName" -> participant first name (optional),
  • "lastName" -> participant last name (optional).

Important: For the moment, links that dynamically complete the profile will only work if the user doesn't already have a Sparkup account.

Here is an example of a link using the different parameters:

https://sparkup.events/connect/ABCDE?embed=true&mode=player&email={{EMAIL}}&firstName={{FIRSNAME}}&lastName={{LASTNAME}} (where "ABCDE" is your session code and ({EMAIL}}, {{FIRSTNAME}}, {{LASTNAME}} are the participant information from the site where Sparkup is integrated).

Player mode integration

Example iframe code :

<iframe src="https://sparkup.events/connect/ABCDE?embed=true&mode=player" allow="autoplay; encrypted-media; picture-in-picture; camera *; microphone *" frameborder="0" scrolling="no" allowtransparency="true" allowfullscreen="true" height="auto" width="100%" style="min-width:340px; min-height:192px;aspect-ratio: 16/9;"></iframe>


You can use this code, and replace the link with your session deeplink, keeping the parameters ?embed=true&mode=player (see above).

ℹ️ Recommended aspect ratio: 16:9

Full mode integration

Example iframe code :

<iframe src="https://sparkup.events/connect/ABCDE?embed=true&mode=full" allow="autoplay; encrypted-media; display-capture; picture-in-picture; camera *; microphone *" frameborder="0" scrolling="no" allowtransparency="true" allowfullscreen="true" height="100%" width="100%" style="min-width:496px; min-height:400px;"></iframe>

You can use this code, and replace the link with your session deeplink, keeping the parameters ?embed=true&mode=full (see above).

ℹ️ Below an iframe width of 540px, Sparkup will switch to a mobile format interface:

Interactivity mode integration

Example iframe code :

<iframe src="https://sparkup.events/connect/ABCDE?embed=true&mode=interactivity" allow="camera *; microphone *" height="100%" frameborder="0" scrolling="no" allowtransparency="true" style="min-width:360px; min-height:400px;"></iframe>

You can use this code, and replace the link with your session deeplink, keeping the parameters ?embed=true&mode=interactivity (see above).

ℹ️ Optimum width 360px