With Webflow, you can only add custom code on a Paid Plan.
Embed
- 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 wildcardhttps://*.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 ashttps://revnite.com
. - 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>
- Publish to see the video on your live site.
Widgets
- First ensure your widget url is allowed for your website within your profile settings.
- 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' />
- 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.