ViGi Video for Webflow

Put your ViGi videos on your Webflow site from a panel inside the Webflow Designer: your 9 essential business videos, a video for any page, and a video for every blog post. Videos are plain, fast HTML5 players with Google video markup. ViGi adds no scripts to your published site.

What you need

• A Webflow site you can edit in the Designer.
• A ViGi account. Your first video is free; more videos need a ViGi plan.
• For blog videos: a CMS collection for your posts (for example "Blog Posts") with a template page.

1. Install the app

1. Find ViGi Video in the Webflow Marketplace and click Install, or open the Designer, press E (Apps) and search for ViGi Video.
2. If Webflow asks which sites ViGi can use, pick your site. This lets ViGi add videos to your blog posts later; you can also skip it and give access from the Blog tab.

2. Connect your ViGi account

1. In the Designer, open Apps → ViGi Video → Launch App.
2. Click Connect to ViGi. A window opens: sign in to ViGi (or create an account) and approve the connection for this site.
3. The panel shows your account and four tabs: This page, Essentials, Blog and Other.

The connection is for this one site. If the window doesn't connect on its own, click Have a connection code? in the panel and paste the code shown in the ViGi window.

3. Add your essential videos

1. Open the Essentials tab. Each finished essential video (Brand, About us, Services, FAQs, Reviews and more) shows the page where it helps most.
2. Check or change the page in the dropdown and click Add to page. The Designer switches to that page and adds the video: brand and about videos go under the top section, the rest above the footer.
3. Publish your site in Webflow when you're ready. Nothing goes live until you publish.

Essentials that are still being made, or not published in ViGi yet, show a link to finish them in ViGi.

4. Make a video for any page

1. Open the page in the Designer, then the This page tab.
2. Click Make a video for this page. ViGi writes and narrates a short video from the page's own title and text (the page doesn't need to be published yet).
3. It takes a few minutes, and you can keep working. When it's ready, click Add to page. Publish your site to make it live.

5. A video for every blog post

1. Open the Blog tab and click Give ViGi access to your blog. On Webflow's screen, pick your site and click Authorize. (Cancel stores nothing; you can try again any time.)
2. Choose your posts collection and click Set up … for videos. ViGi adds hidden "ViGi video" fields to the collection and one video player to its template page, connected to those fields. It only shows on posts that have a video.
3. Click Make video on a post, or Make videos for all posts without one. ViGi makes each video from that post's own text.
4. When a video is finished, ViGi writes it into the post. If the post was already live, ViGi republishes just that post so the video appears; drafts stay drafts.

New post? Open the Blog tab and click Make video on it.

6. Other videos and updates

• Other tab: add any other finished ViGi video after the element you have selected, or at the bottom of the page.
• Update videos on this page: replaces every ViGi video on the open page with its latest version (new render, thumbnail, captions). Publish to make the update live.

7. Disconnect or uninstall

• Remove ViGi's CMS access (Blog tab) deletes ViGi's Webflow access for blog posts.
• Disconnect (bottom of the panel) disconnects the site from your ViGi account and deletes ViGi's Webflow access.
• To uninstall, remove ViGi Video in your Webflow workspace or site settings under Apps & Integrations. ViGi deletes its stored access within 24 hours (at once if it's used).

Videos already on your pages keep playing after you disconnect. Remove them in the Designer like any other element.

Permissions and your data

• Sites (read): confirm which site you gave access to.
• CMS (read and write): read your posts' text to write their videos, add ViGi's video fields, write finished videos into posts and republish posts that were already live.
• Authorized user (read): confirm it's you, on the right site, before ViGi changes anything.

ViGi's Webflow access is stored on our servers only, encrypted, and is never sent to your browser. See section 17 of our privacy policy for details.

Troubleshooting

• "Pick this site" after giving access: on Webflow's screen, make sure your site is selected, then try again.
• "This link has expired": the access window was open too long or opened twice. Close it and click the button again.
• "You've used your free video": pick a ViGi plan to make more videos.
• Video not showing on the live site: publish your site in Webflow after adding or updating videos.

Questions? Email support@vigivideo.com.