Utilisez Sparkup partout où vous en avez besoin

Grâce à une session Sparkup intégrée, vous pouvez interagir avec votre public en ligne qui pourra envoyer des questions, répondre aux sondages et quiz directement depuis votre site web ou votre application.

Nous verrons d'abord comment récupérer le lien de votre session et ensuite comment l'intégrer.  Dans cet article :

• Lien profond pour entrer dans une session
• Lien profond pour entrer dans une session en étant déjà connecté
• Intégrer l'interface participant Sparkup (vue mobile)
• Intégrer l'interface participant et l'écran de Présentation Sparkup (vue ordinateur)
• Intégrer l'écran de Présentation séparément
• Intégrer le player interactif Sparkup Now! séparément

Lien profond pour entrer dans une session

Une fois votre session créée, vous pouvez utiliser ce que l'on appelle un "lien profond" qui ressemble à ceci :

https://sparkup.live/connect/ABCDE , où "ABCDE" est votre code session unique.
(ou https://alias.sparkup.live/connect/ABCDE en fonction de votre URL Sparkup)

Voici comment récupérer ce lien depuis votre session Sparkup:

1. Ouvrez les paramètres de votre session,
2. Cliquez sur l'onglet Partager l'accès,
3. Copier le lien de votre session.

Avec ce type de lien, vos participants entreront dans Sparkup directement dans la session, sans avoir à entrer le code.

Vous pouvez également ajouter certains paramètres en fonction de vos besoins :

• "tabs" -> permet de choisir les onglets qui seront disponibles pour les participants entre live, foryou et/ou exit (consultez Comment utiliser Sparkup en tant que participant ? pour en savoir plus sur l'interface du participant). Si un seul onglet est listé, alors la barre de menu est simplement supprimée.
• "embed" -> si définie comme true, la popup du profil sera sautée lors de la connexion à la session Sparkup.

Voici un exemple de lien avec les onglets live + foryou activés et la popup de profil sautée :
https://alias.eu.sparkup.live/connect/ABCDE?tabs=live,foryou&embed=true (où "ABCDE" est votre code session).

Lien profond pour entrer dans une session en étant déjà connecté

Important: Pour l'instant, ce lien ne fonctionnera que si l'utilisateur n'a pas déjà de compte Sparkup. Nécessite un développeur pour utilisez ce lien profond de manière dynamique.

Si vos participants sont déjà connectés à votre application (ou votre site web), et que vous disposez de l'adresse e-mail, vous pouvez les connecter directement à Sparkup. Pour ce faire, vous devez définir dynamiquement l'URL en fonction de l'utilisateur en mettant à jour l'e-mail (doit être correct), le prénom (facultatif) et le nom (facultatif).

Voici un exemple avec le participant "John Doe" :
https://sparkup.live/connect/ABCDE?email=john.doe@gmail.com&firstName=John&lastName=Doe
(ou https://alias.sparkup.live/connect/... en fonction de votre URL Sparkup)

Vous pouvez également ajouter certains paramètres en fonction de vos besoins :

• "tabs" : permet de choisir les onglets qui seront disponibles pour les participants entre live, foryou et/ou exit (consultez Comment utiliser Sparkup en tant que participant ? pour en savoir plus sur l'interface du participant). Si un seul onglet est listé, alors la barre de menu est simplement supprimée.
• "embed" : si définie comme true, la popup du profil sera sautée lors de la connexion à la session Sparkup.

Voici un exemple de lien avec les onglets live + foryou activés et la popup de profil sautée :
https://alias.eu.sparkup.live/connect/ABCDE?tabs=live,foryou&embed=true&email=john.doe@gmail.com&firstName=John&lastName=Doe (où "ABCDE" est votre code session unique).

Intégrer l'interface participant Sparkup (vue mobile)

Interface participant seule (vue mobile)

Il vous suffit de prendre le lien profond de votre session (expliqué précédemment) et de l'insérer dans votre code avec ces paramètres :
<iframe src="Lien Sparkup" allow="camera *; microphone *" height="100%" width="100%" style="max-width:839px; min-width:320px; min-height:568px;"></iframe>
Vous pouvez utiliser ce code, et remplacer "Lien Sparkup" par votre lien profond Sparkup (voir plus haut).

Informations importantes :

• Largeur minimum: 320px (375px recommandé),
• Hauteur minimum: 568px,
• Largeur maximale pour afficher uniquement la partie interaction (vue mobile): 839px,
• Ratio recommandé 9:16 (vue mobile),
• Si vous définissez une largeur supérieure à 840px, l'écran de présentation Sparkup (et/ou le flux vidéo) sera également intégré,
• Les paramètres caméra et le microphone sont autorisés pour permettre à l'utilisateur de prendre sa photo de profil et également d'utiliser l'activité Photostory,
• Éviter d'avoir des boutons ou des liens proches de la zone d'interaction de Sparkup.

Intégrer l'interface participant et l'écran de Présentation Sparkup (vue ordinateur)

L'écran de Présentation + l'interface participant (vue Ordinateur)

Il vous suffit de prendre le lien profond de votre session (expliqué précédemment) et de l'insérer dans votre code avec ces paramètres :
<iframe src="Lien Sparkup" allow="autoplay; encrypted-media; picture-in-picture; camera *; microphone *" frameborder="0" scrolling="no" allowtransparency="true" allowfullscreen="" height="100%" width="100%" style="min-width:840px; min-height:568px;"></iframe>

Vous pouvez utiliser ce code, et remplacer "Lien Sparkup" par votre lien profond Sparkup (voir plus haut).

Informations importantes :

• Largeur minimum: 840px (en-dessous l'écran de Présentation Sparkup sera retiré,
• Hauteur minimum: 568px,
• Ratio recommandé 16:9,
• Les paramètres caméra et le microphone sont autorisés pour permettre à l'utilisateur de prendre sa photo de profil et également d'utiliser l'activité Photostory,
• Éviter d'avoir des boutons ou des liens proches de la zone d'interaction de Sparkup.

Intégrer l'écran de Présentation des résultats séparément

Ecran de Présentation des résultats Sparkup séparé

Vous pouvez également intégrer l'écran de Présentation Sparkup séparément avec ce code :

<iframe src="https://alias.sparkup.live/cast/#/?token=ABCDE&mode=emb" position=relative; height="100%" width="100%" style="height: auto; aspect-ratio:16/9"></iframe>

<iframe src="https://alias.sparkup.live/cast/#/?token=ABCDE&mode=emb" position=relative; height="100%" width="100%" style="height: auto; aspect-ratio:16/9"></iframe>

où il faudra remplacer dans votre lien "alias" par le votre, et le code "ABCDE" par votre code de session unique. (Vous pouvez également copier le lien de l'écran de Présentation directement depuis votre session Sparkup)

Informations importantes :

• Cette écran diffuse l'activité en cours et ses résultats,
• Ratio imposé 16:9,
• Le bandeau noir d'informations peut être caché (voir comment).

Intégrer le player interactif Sparkup Now! séparément

Sparkup peut fournir un streaming à ultra-faible latence avec des live réactions d'emojis et une audience virtuel en direct qui peut être affichée sur la scène ! Et ce player peut être intégré séparément de la partie interactivité.

Player interactif Sparkup Now! pour le streaming avec les live reactions

Vous pouvez l'insérer séparément dans votre plateforme avec cette iframe :
<iframe class="iframe-component-iframe" frameborder="0" scrolling="no" allowtransparency="true" allow="autoplay; encrypted-media; picture-in-picture; camera *; microphone *" allowfullscreen="" src="https://player.sparkup.live/?conf=ma-clef-unique&mode=mode-specifique"></iframe>

Paramètres :

• conf - ma-clef-unique est la clef dédiée pour l'évènement donnée par Sparkup,
• mode (optionnel) - mode-specifique donné par Sparkup pour spécifier quel mode est souhaité. C'est utile quand on a différents players (pour différent(e)s langues ou ateliers par exemple).
  
  

Quelques articles supplémentaires qui pourraient vous intéresser :

• • Appareils et navigateurs compatibles avec Sparkup
  • Intégrer votre vidéo en direct dans Sparkup
  • Intégrer Sparkup dans Microsoft Teams
  • Intégrer Sparkup dans Webex