Skip to main content

Embedding on Wix

How to Embed LORA Live Shows on Wix​

LORA makes it easy to implement livestreams on your website with minimal technical knowledge required. By following a few simple steps, you can add your LORA live shows to your Wix website and provide your audience with an engaging and interactive experience.

Here are the pre-requisites to embedding your live shows onto your Wix site:

  • A Wix site with a Premium plan
    This is necessary because the “Custom Code” feature, which allows you to add external code to your site, is only available with a Premium plan.
  • LORA Live Show embed code with “Watch Now” button
    The embed code will be generated after creating a live show. Due to restrictions by Wix, the Direct Display embed code option is not compatible on Wix.

Once you have satisfied the prerequisites mentioned above, follow these steps to successfully embed your live show. To summarize, you will need to paste the embed code into your site and assign a button to open the live show player via the live show's URL.

Add the Embed Code into your site​

  1. On your LORA CMS, copy the “Watch Now“ embed code from the LORA CMS Show Details page. Your code should look something like this:

    <button id="YOUR_ELEMENT_ID">Watch live</button>
    <script>
       var scriptElement = document.createElement("script");
       scriptElement.src = "https://lora-sdk.belive.sg/player-widget/latest/player.min.js";
       scriptElement.onload = function () {
          const player = window.BeLivePlayerWidget.initialize({
             showId: "d1234a05-0bfa-123j4-baae-5d9da24089e5",
             triggerElement: document.getElementById("YOUR_ELEMENT_ID"),
          });
       };
       document.body.appendChild(scriptElement);
    </script>

  2. Login to your Wix Premium site and go to the editor for the site where you want to embed the livestream player.

  3. Click on the “+Add“ button in the left-hand menu, click “Embed Code“. Scroll down until you see the "Custom Code" option and click on it.

  4. Click on “Add Custom Code“ on the top-right corner of the window. Paste the embed code into the Code Snippet field. After pasting, delete the ‘button id’ tag from the code. Your code should now look like this:

    <script>
       var scriptElement = document.createElement("script");
       scriptElement.src = "https://lora-sdk.belive.sg/player-widget/latest/player.min.js";
       scriptElement.onload = function () {
          const player = window.BeLivePlayerWidget.initialize({
             showId: "d1234a05-0bfa-123j4-baae-5d9da24089e5",
             triggerElement: document.getElementById("YOUR_ELEMENT_ID"),
          });
       };
       document.body.appendChild(scriptElement);
    </script>

  5. Select to place the code in the Body-Start or Body-End sections. You can also give the code a name for your reference, and select which page to add the code to. Click “Apply“.

Add a button to open the live player​

  1. In the Wix editor, select the page where you want to add the button.

  2. Click on the “+ Add“ button on the left-hand side of the editor.

  3. Select the "Button" option from the list of elements.

  4. Choose the style of the button you want to use from the menu of options that appear.

  5. Click and drag the button to the desired location on your page.

  6. Click on the button to select it, and then click on the link icon.

  7. In the menu that pops up, select “Web Address”.

  8. In the URL field, enter the URL of your live show player. This should be the Wix site URL of where your live show is embedded, followed by /?beliveShowId=”YOUR_SHOW_ID”. Replace “YOUR_SHOW_ID” with the Show ID of your live show, which can be copied from your CMS.

    Example: https://yourwixsite.com/events/?beliveShowId=d1234a05-0bfa-123j4-baae-5d9da24089e5

  9. Click “Save” to apply the changes and add the button to your page.

That's it! With these steps, you should now be able to easily embed a short video or playlist on your Wix website.