Intégrer le live en iframe, sur votre site web ou application

Le live, comprenant toutes les interactivités (chat, votes, documents, …), peut être intégré dans une iframe au sein de votre site web ou application.

La vue est adaptée en fonction de la taille allouée à Wisembly.

Exemple de code à intégrer

<iframe 
    src="https://one.wisembly.com/live/keyword" 
    width="375px" // valeur à adapter
    height="670px" // valeur à adapter 
    border="0" 
    marginheight="0" 
    marginwidth="0" 
    frameborder="0">
</iframe>

• https://one.wisembly.com/live/keyword doit être modifié avec le keyword de votre événement à la place de keyword.
  ex : Si votre keyword est kickoff, l’url devra être https://one.wisembly.com/live/kickoff
• Si vous souhaitez modifier la taille de l’iframe, vous pouvez modifier dans le code : 
  • width avec une valeur en pixel afin d’ajuster la largeur

• • height avec une valeur en pixel afin d’ajuster la hauteur

Il est également possible de mettre ces valeurs à 100%, si le container de la page qui accueil l’iframe doit s’adapter en fonction du ratio et des autres modules (hors Wisembly) qui seraient intégrés de votre fait.

• Pour un affichage portrait (émulation de la version mobile), les valeurs recommandées sont : 
  • width : 375px

• • height : 600px

• Pour un affichage paysage (émulation de la version de bureau), les valeurs recommandées sont :

  • width : 1100px (minimum : 880px)

  • height : 700px
  • Usage avancé, pour forcer un affichage paysage si la largeur allouée est faible, il est possible d’intégrer Wisembly de la façon suivante : 

    <div style="width: 100%; max-width: 1092px; height: 600px; overflow: hidden; box-sizing: border-box;">
        <iframe class="iframeWisembly" style="height: 100%; width: 100%; border: none;"
            src="https://one.wisembly.com/live/keyword">
        </iframe>
    </div>
    
    <script>
        const iframe = document.querySelector(".iframeWisembly");
        const containerIframe = iframe.parentElement;
    
        const createStyleIframe = (scale = 0.9, mobileSize = 745) => {
            if (!containerIframe || !iframe) return;
    
            const isMobile = window.matchMedia(`(max-width: ${mobileSize}px)`).matches;
    
            if (isMobile) scale = 1;
    
            const containerWidth = containerIframe.getBoundingClientRect().width,
                containerHeight = containerIframe.getBoundingClientRect().height,
                scaledWidth = containerWidth / scale,
                scaledHeight = containerHeight / scale;
    
            iframe.style.width = `${scaledWidth}px`;
            iframe.style.height = `${scaledHeight}px`;
            iframe.style.transform = `scale(${scale})`;
            iframe.style.transformOrigin = "0 0";
        }
    
        const loadScript = () => {
            const applyStyleIframe = () => createStyleIframe(0.9, 745);
            applyStyleIframe();
            window.addEventListener("resize", applyStyleIframe);
        }
    
        document.addEventListener("DOMContentLoaded", loadScript);
    </script>

    En ajustant selon besoin les tailles indiquées dans l’exemple ci-dessus, avec une width n’allant pas en dessous de 880px. 

• Si l’événement est sur inscription et que les participants arrivent non connectés, ils passeront par la page de l’événement et devront se connecter avant d’accéder au live.

ℹ️L’intégration de Wisembly en iframe n’est pas une fonctionnalité native de l’application, et le bon rendu de cette dernière est lié au respect des éléments précisés ci-dessus. 
Si besoin, il est possible de solliciter nos équipes techniques pour vous guider dans cette intégration.

💬 Intégrer le chat

 Il est possible d’intégrer uniquement le chat, la procédure est la même, seule l’url à intégrer change : https://one.wisembly.com/fm/keyword/tchat