An embeddable widget is a piece of code somebody can use to show parts of a third party site on their own platform. In the case of Kuula, we are beginning to build out our offering. By copying this code and then using it in a website builder such as WIX / Squarespace etc, you can have parts of our website appear on your own site.
If you embed your entire channel into Wix / Squarespace, students who try to purchase content on your channel will login, but immediately be logged out and unable to view content, or make purchases. This is because our site stores your login information as a cookie. The cookie says 'StudentA' is logged in to kuula.tv
However, if you embed the site in your page, the site isn't kuula.tv, its the address you have for your site, so it ignores or blocks the cookie and logs the user out. Mainly for security purposes. You wouldn't want to log in to Kuula, and then have another person create a website, embed Kuula into their page and capture your billing information.
We can fix this by using embeddable widgets, our widgets can display information that doesn't need you to login, and when the student needs to purchase something, it will open up a link to Kuula and allow them to purchase the content without any issues.
<iframe src="<https://www.kuula.tv/embed/schedule?channelUrl=insertChannelURLHere>" width="100%" height="620px" frameBorder="0" scrolling="no"></iframe>
iframe src, you can see a Kuula address. After the schedule?channelUrl= section, i've input a placeholder string of characters. Here you can replace it with your own channel URL.Example: In the case of mindfulsonder it would look like:
<iframe src="<https://www.kuula.tv/embed/schedule?channelUrl=mindfulsonder>" width="100%" height="620px" frameBorder="0" scrolling="no"></iframe>
width="100%"should be left as is. This handles the width of the widget on your site, leaving it to 100% will mean it can work on desktop and mobile, as the size will change accordingly. If you set it to something else, it may behave unexpectedly.If you do want to change it, you can try the following:
width="500px" - Setting a pixel width will cause it to always be 500px wide. This means on a mobile it wont fit on the screen
width="50%" - This is the same as the % above, but 50%. This means the widget will always take up 50% of the size of the space you have given to the widget. So if you the space where you can use a widget to be 70% of your screens width, the widget will then shrink itself down 50% from that size.
height="620px" - Like width, we can set the height of the widget too. However we usually want to set a fixed height. This means we will show a certain amount of stuff within the set height, and anything else will be off screen. If you choose to enable scrolling, the user can then scroll down to see the additional classes.Suggestion: If you schedule a lot of classes each week, you might prefer to set the height of the widget to 1000px by changing it to height="1000px".
scrolling="no" - This effects if your widget will scroll to show more content. The widget will only scroll if there is additional content to show. Please note: if the widget is larger than the space you have reserved to place down the widget (Lets say you make a box, but the widget is bigger than the box because of the settings adjusted above) - the space you created for the widget will also scroll to show the rest of the widget itself. This can lead to two scroll bars if scrolling is yes and the size of the space containing the widget is smaller than the widget itself.Default view: With no advanced customisation options and just using code provided above, the header of the widget will look like this: