Exemples de Code Personnalisé

Sur cette page, vous trouverez quelques exemples de base d'utilisation de la section de code personnalisé. Assurez-vous de lire l'article sur le code personnalisé pour comprendre comment il fonctionne dans Umso.

Si vous ne l'avez pas encore fait, apprenez à ajouter une section de code personnalisé.

Vidéo YouTube

Le code suivant vous permet d'ajouter une vidéo YouTube. Le lien YOURLINK peut être trouvé en cliquant sur « partager » juste en dessous de votre vidéo YouTube, puis en choisissant l'option « intégrer ».

<iframe width="560" height="315" 
src="https://www.youtube.com/embed/YOURLINK" 
frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"allowfullscreen></iframe>

Intégrer un podcast

Il existe de nombreux lecteurs de podcasts, et certains d'entre eux fournissent un code d'intégration. Voici un exemple d'un podcast Apple. Remplacez PODCAST-URL par la dernière partie de l'URL du podcast, par exemple : /ca/podcast/niche-website-builders-show/id1548013326

<iframe src="https://embed.podcasts.apple.com/PODCAST-URL?itsct=podcast_box&amp;itscg=30200&amp;theme=light" height="450px" 
frameborder="0" sandbox="allow-forms allow-popups allow-same-origin allow-scripts allow-top-navigation-by-user-activation" 
allow="autoplay *; encrypted-media *;" 
style="width: 100%; max-width: 660px; 
overflow: hidden; border-radius: 10px; 
background: transparent;"></iframe>

Ajouter Calendly

Vous pouvez trouver un code d'intégration sur votre compte de calendrier. Le code sera similaire au code ci-dessous, où à la place de YOUR-CALENDAR, vous aurez le chemin de votre calendrier.

<!-- Calendly inline widget begin -->
<div class="calendly-inline-widget" data-url="https://calendly.com/YOUR-CALENDAR" style="min-width:320px;height:630px;"></div>
<script type="text/javascript" src="https://assets.calendly.com/assets/external/widget.js"></script>
<!-- Calendly inline widget end -->

Modifier des éléments CSS

Centrer des éléments

Si vous souhaitez centrer votre iframe, vous pouvez l'envelopper dans un élément div contenant certaines propriétés de style. Veuillez noter qu'il n'est pas nécessaire que l'élément enfant soit une iframe ; cela peut être n'importe quel autre élément.

<div style="align-items: center; 
justify-content: center; display: flex;">
<iframe>...</iframe>
</div>