With Webflow, you can only add custom code on a Paid Plan.

Embed

  1. Add the url of your published Webflow store to the video settings. For example, to show the video in the designer, use the full url such as https://revnite-xxxx.design.webflow.com or wildcard https://*.design.webflow.com. Use the first to prevent other webflow users from embedding your videos. For the published site, use your published site url such as https://revnite.com.
  2. In the webflow designer, add a "Code Embed" element to where you wish to add the video and paste the following replacing the video id src.
    <div style="display:flex; justify-content: center;">
      <div style="width:576px; height:1024px;">
        <iframe
          id="revnite"
          src="https://revnite.com/embed/v1/${videoId}"
          frameborder="0"
          style="width:100%; height:100%;"
          allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture;">
        </iframe>
      </div>
    </div>
    
  3. Publish to see the video on your live site.

Widgets

  1. First ensure your widget url is allowed for your website within your profile settings.
  2. Open your site settings and go to the custom code settings. In the "Head code" section, add the following script tag replacing $profilename with your profile name, excluding the '@' symbol. Note that this is site wide custom code and will appear for all Webflow pages.
    <script id='RevniteWidgetJs' src='https://revnite.com/js/widget/v1.js?profilename=$profilename' />
    
  3. In the section "Footer code" add the following snippet replacing the video id:
    <script>
      const settings = {
        video_id: 'Video:0123456789',
        fixed: {
          bottom: '20px',
          right: '20px',
        },
        fullscreen: {
          limit: {
            height: 540,
          },
        },
      };
    
      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>
    

Note that the widget may not show up until the site is published, check all looks as intended using the webflow staging page before your published page.

On this page