On this page, you will be able to find some basic examples of the usage of the custom code section. Make sure to read the Custom Code article to understand how custom code works in Umso.
Custom Code Section
Learn how to use custom code
Youtube Video
The following code allows you to add a YouTube video. YOURLINK can be found if you click "share" right below your YouTube video and then chose the option "embed".
<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>
Embedding a podcast
There are a lot of podcast players out there, and some of them provide an embed code. Here is an example of an Apple podcast. Replace PODCAST-URL with the last part of the URL of the podcast, for example: /ca/podcast/niche-website-builders-show/id1548013326
<iframe src="https://embed.podcasts.apple.com/PODCAST-URL?itsct=podcast_box&itscg=30200&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>
Adding Calendly
You can find an embed code on your calendar account. The code will be similar to the code below, where instead of YOUR-CALENDAR you will have the path of your calendar.
<!-- 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 -->
Modifying CSS elements
Centering Elements
If you want to center your iframe, you can wrap around a div element containing some styling properties. Please note that doesn't need to be an iframe as the child element, can be anything any other element.
<div style="align-items: center;
justify-content: center; display: flex;">
<iframe>...</iframe>
</div>