Embed

1. Add the url of your published Shopify store to the video settings. For example https://revnite.myshopify.com.
2. Open your Shopify admin editor and add the following section component. The CSS is basic and may be configured to your needs.

{%- if section.settings.videoId != blank %}
<div style="display:flex; justify-content: center;">
  <div style="width:576px; height:1024px;">
    <iframe
      id="revnite"
      src="https://revnite.com/embed/v1/{{ section.settings.videoId }}"
      frameborder="0"
      style="width:100%; height:100%;"
      allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture;">
    </iframe>
  </div>
</div>
{%- endif -%}

{% schema %}
  {
    "name": "Revnite Embed",
    "tag": "section",
    "class": "section",
    "settings": [
      {
        "type": "text",
        "id": "videoId",
        "label": "id of the Revnite video to embed"
      }
    ],
    "presets": [
      {
        "name": "Revnite Embed"
      }
    ]
  }
{% endschema %}

3. Return back to the editor and add the Revnite Embed Section. In the editor panel add the video id to panel, and that's it, your video is embedded!

Note that the video may not be visible due to browser restrictions until you preview your page.

Widgets

1. First ensure your widget url is allowed for your website within your profile settings.
2. In the top left of your Shopify admin editor, enter the code editor which will let you edit your Shopify site code. In the left side bar, open the layouts > theme.liquid.

Include the following script tag within your page head. Replacing $profilename with your profile name, not including the '@' symbol.

  <script id='RevniteWidgetJs' src='https://revnite.com/js/widget/v1.js?profilename=$profilename' />

3. In the same layout, scroll down to the end of the body section and add the snippet replacing the video id:

<script>
  const settings = {
    video_id: 'Video:0123456789',
  };

  window.addEventListener('message', (e) => {
    const event = e.data.event;
    if (event === 'revnite.widget.mounted') {
      const revniteWidget = document.getElementById('RevniteWidgetiFrame');
      revniteWidget?.contentWindow?.postMessage({
        event: 'revnite.widget.settings',
        settings
      }, 'https://revnite.com');
    };
  });
</script>