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

This article contains the following sections:

Embedding a live stream and chat function to mini event site

Creating a button to your Mini Event Site

Countdown widget

Enhancing mobile responsiveness (embedded video)

Navigation - add an anchor

Embedding a live stream and chat function to mini 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 Mini event site 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 a Mini event site. You can find the basic instructions in this article: Mini event site and Event App
3. Open the Mini event site 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 Mini event site's Settings.
6. When you've finished with your Mini Event Site, copy the direct link to the site. 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 mini event site 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 Mini Event Site

It is possible to add a button to your Mini Event Site. 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 mini event site. 


The button will look like this on the actual website:

Countdown widget

You can also add a countdown widget to the mini event site. 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 mini event site.

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 mini event site:

Open the Mini Event Site 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 mini event site 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 mini event site! 

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:

Navigation - add an anchor

Anchors are useful when you have several elements in one page. They allow you to jump directly to a specific section of that page instead of scrolling to it. 

Using the "source" button, add an ID to the element you wish to jump to. Here's an example: 

<div id="test">My text</div>

Once the ID is in place, add a link (#ID) behind the element that allows you to jump to the other element of the page.

Here's an example: 

Link type=URL

Protocol=other

URL= #test

The video below shows an example you can follow. It lasts 1 min and can be viewed without sound.