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
- Deeplink to enter a session and be already connected
- Embedding the Sparkup participant interface (interactivity part only)
- Embedding the full participant interface
- Embedding the Presentation screen separately
- Embedding the Sparkup Now! interactive player separately
Deeplink to enter a session
Once your session is created, you can use what is called a "deep link" which looks like this:
https://sparkup.live/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:
- Open your session settings,
- Click on the Share Access tab,
- Copy the session link.
With this type of link, you enter Sparkup as a participant directly into the session, without having to enter the code.
You can add some parameters depending on your needs:
- "tabs" : allow you to choose which tabs will be available for the participants between live, foryou and/or exit (check How to use Sparkup as a participant? to find out more about the participant interface). If just 1 tab is listed, then the menu bar is simply removed.
- "embed" : if set as true the profile popup will be skipped when joining the Sparkup session
Here a link example with the tabs live + foryou activated and the profile popup skipped:
https://alias.eu.sparkup.live/
Deeplink to enter a session and be already connected
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.
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":
https://sparkup.live/connect/ABCDE?email=john.doe@gmail.com&firstName=John&lastName=Doe
(or https://alias.sparkup.live/#!/... depending on your Sparkup URL)
You can also add some parameters depending on your needs:
- "tabs" : allow you to choose which tabs will be available for the participants between live, foryou and/or exit (check How to use Sparkup as a participant? to find out more about the participant interface). If just 1 tab is listed, then the menu bar is simply removed.
- "embed" : if set as true the profile popup will be skipped when joining the Sparkup session
Here a link example with the tabs live + foryou activated and the profile popup skipped:
https://alias.eu.sparkup.live/
Embedding the Sparkup participant interface (interactivity part only)
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 full participant interface
Sparkup's results Presentation screen (or live streaming) + 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
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&mode=emb" 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).
Embedding the Sparkup Now! interactive player separately
Sparkup can provide an ultra-low latency streaming with live emojis reactions and live virtual audience that can be displayed on stage! And it can be embedded separately from the interactivity part.
Sparkup Now! streaming player with live emojis reactions
You can insert it separately in your platform with this iframe:<iframe class="iframe-component-
The UUID is given from our side for each event.
Some other articles that might help you:
Comments
0 comments
Please sign in to leave a comment.