In this article you'll find extra tips on how to make your Event Website even more amazing

This article contains the following sections:

Embedding a live stream and chat function to event site

Creating a button to your Event Website

Countdown widget

Enhancing mobile responsiveness (embedded video)

Embedding a live stream and chat function to event site

1. Create an event. Mark it as an online event. On the event information page, mark your event as an online event. You'll need to add an online event link - in this case it will be the Event website link. You can add it later. Now you can carry on with gathering registrations to your event. When the registrations are done, it's time to create a website where you can embed the Live Stream.
2. Create an Event Website. You can find the basic instructions in this article: Event website and Event App
3. Open the Event Website in Source view and paste the iframe code of your live stream. You'll find the code by clicking Share > Embed. More details and guidance can be found by searching for it on the internet, for example a link to instructions for Vimeo embedding: https://help.livestream.com/hc/en-us/articles/360002051488-How-Do-I-Embed-My-Event-
   
   
   
4. After you've pasted the live stream iframe in the box, you can add an iframe code for the live chat. The code is:
   <iframe src="https://www.youtube.com/live_chat?v=y7e-GC6oGhg&embed_domain=www.lyyti.fi" width="100%" height="600"></iframe>
5. You can hide the registration page from the Event Website's Settings.
6. When you've finished with your Event Website, copy the direct link to Event website. Paste the link to Event information page  > Link to online event
   
7. Like in any other online event, the registered participant has their personal online event link in their a) calendar mark b) confirmation message and c) you can send it also as a reminder via email. 
   The personal online event link will lead to a Lyyti-landing page. By clicking the button there, the participant is guided to the event website to watch the live stream. 
   Participants who enter using their personal online event link are marked as attending in Lyyti. 
   
   More information on how to create an online event is found in this article: Online event
   
   
   

Creating a button to your Event Website

It is possible to add a button to your Event Website. Lyyti doesn't provide this by default, but with some minor gimmickry it can be done:

1. First add the text that you wish to appear on the button. (In this example the button allows visitors to listen to music). Paint the word(s) with your mouse > click on the link icon
   
2. Add the link that will be behind the button. In this example it is a YouTube link:

Then move to Advanced tab. Add the text:
btn-success   
to Stylesheet classes. Press OK to close the link window and save the event website. 


The button will look like this on the actual website:

Countdown widget

You can also add a countdown widget to the event website. There are free tools for you to use, feel free to choose it yourself. All you need from the tool is an iframe-code that you can then add to Lyyti's event website.

One free example is here: https://www.timeanddate.com/clocks/freecountdown.html
Once you've created your countdown, you copy the iframe link provided in the tool. Move then to your Event website:

Open the Event Website in Source view and paste the iframe code of your live stream. Close Source view and adjust the iframe as you wish in the text editor. 
Your event website will look e.g. like this:

Enhancing mobile responsiveness (embedded video)

If you want to make sure that the embedded video is respsonsive also in mobile view, you can add this code to the Source code. Please test it first before you go public with the event website! 

N.B. Customers are responsible to test themselves any changes added in source code as we cannot offer support for the source code. 

<style type="text/css">.video-container {
position: relative;
padding-bottom: 56.25%;
}

.video-container iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
</style>
<div class="video-container"><iframe allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen="" frameborder="0" height="315" src="PLACE YOUR YOUTUBE EMBED LINK HERE" title="YouTube video player" width="560"></iframe></div>

The YouTube-link you need to embed is this part:

Final result should look similar to this example: