Articles in this section

Embed your Sparkup session in your website or event app

  • Updated
Follow

Use Sparkup anywhere you need to

Using an embedded Sparkup session, you can interact with your online audience who can send questions and vote in polls directly from your website or app.

We will see first how to retrieve your session link and then how to integrate it.  In this article:

Deeplink to enter a session

Once your session is created, you can use what is called a "deep link" which looks like this:

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

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

  1. Open your session settings,
  2. Click on the Share Access tab,
  3. Copy the session link.

Session_link_copy_EN.gif

With this type of link, you enter Sparkup as a participant directly into the session, without having to enter the code.

Deeplink to enter a session and be already connected

If your participants are already logged in to your application, and you have the email address, you can log them directly into Sparkup. To do so, you need to dynamically set the URL depending on the user by updating the email (must be a correct one), first name (optional), and last name (optional).


Here an example with the participant "John Doe":
sparkup.live/connect/ABCDE?email=john.doe@gmail.com&firstName=John&lastName=Doe
(or alias.sparkup.live/#!/... depending on your Sparkup URL)


Important: For now, it only works if the user doesn't already have a Sparkup account. You need a developper to make this deeplink dynamically works.

Embedding the Sparkup participant interface (mobile view)

interaction_only.png
Participant interface only (mobile view)

You just have to take the deeplink of your session (explained previously) and insert it in your code with these parameters:
<iframe src="Sparkup link" allow="camera *; microphone *" height="100%" width="100%" style="max-width:839px; min-width:320px; min-height:568px;"></iframe>

You can use this code, and replace "Sparkup link" with your correct Sparkup deeplink (see above).

Important information:

  • Minimum width: 320px (375px recommended),
  • Minimum height: 568px,
  • Maximum width to only display the participant interface: 839px,
  • Recommended ratio 9:16 (mobile view),
  • If you set a width greater than 840px, the Sparkup Presentation screen (and/or video stream) will also be integrated,
  • Camera and microphone settings are enabled to allow the user to take his profile picture and also to use the Photostory activity,
  • Avoid having buttons or links close to the Sparkup interaction area.

Embedding the participant interface and the Sparkup's Presentation screen (computer view)


interaction_presentation.png
Sparkup's results Presentation screen + participant interface (computer view)

You just have to take the deeplink of your session (explained previously) and insert it in your code with these parameters:
<iframe src="Your Sparkup link" allow="camera *; microphone *" height="100%" width="100%" style="min-width:840px; min-height:568px;"></iframe>

You can use this code, and replace "Your Sparkup link" with your correct Sparkup deeplink (see above).

Important information:

  • Minimum width: 840px (if lower the Sparkup Presentation screen will be removed),
  • Minimum height: 568px,
  • Recommended ratio 16:9,
  • Camera and microphone settings are enabled to allow the user to take his profile picture and also to use the Photostory activity,
  • Avoid having buttons or links close to the Sparkup interaction area.

Embedding the Presentation screen separately

cast_only.png
Sparkup's Presentation screen (for results) only

You can also integrate the Sparkup's Presentation screen (for results) separately with this code:

<div style="position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden;">
<iframe src="https://alias.sparkup.live/cast/#/?token=ABCDE" position=relative; height="100%" width="100%" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;"></iframe>
</div>

where you will need to replace "alias" with your own alias name and the "ABCDE" code in your link with your unique session code. (You can also copy your Presentation screen link directly inside your session)

Important information:

  • This screen shows the current activity and its results,
  • Required ratio 16:9,
  • The black information footer can be hidden (see how).

Some other articles that might help you:

Related articles

Comments

0 comments

Please sign in to leave a comment.