How can I make a purchase button appear only after a customer watches a video in Webflow, and show the sections of the website only when the customer clicks the button?

Published on

September 22, 2023

Note

CommunityFAQ is not affiliated with Webflow. Click here if you'd like to visit Webflow's help resources.

To make a purchase button appear only after a customer watches a video in Webflow and show the sections of the website only when the customer clicks the button, you can follow these steps:

Create the video: First, you'll need to create the video that you want your customers to watch before the purchase button appears. You can use a video editing tool or an external video hosting platform to create the video file.
Upload the video: After creating the video, you'll need to upload it to a video hosting platform like YouTube or Vimeo. These platforms will provide you with an embed code that you can use in Webflow.
Add a video element: In Webflow, go to the page where you want the video to appear. Drag and drop a video element onto the page.
Embed the video: With the video element selected, paste the embed code provided by the video hosting platform into the appropriate field in the Webflow settings panel.
Create an interaction: Select the video element again and click on the "Interactions" tab in the settings panel. Create a new interaction by clicking the "+" button.
Set up the interaction trigger: In the interaction panel, set the trigger for the interaction to be when the video finishes playing. Use the appropriate event on the video element to trigger the interaction.
Add a class to the purchase button: Select the purchase button element and give it a specific class name, such as "hidden-button".
Set the initial state of the purchase button: In the interactions panel, set the initial state of the purchase button to be hidden, using the class name you gave it.
Create an interaction for the purchase button: Create a new interaction on the purchase button element. Set the trigger for the interaction to be when the customer clicks on the button.
Set the interaction action: In the new interaction, set the action to show the hidden-button class when the button is clicked.
Add sections to the page: Now you can create the sections of the website that you want to show or hide based on the purchase button click. Add these sections to the page and give them appropriate class names.
Set the initial state of the sections: In the interactions panel, set the initial state of the sections to be hidden, using their respective class names.
Create an interaction for the sections: Create a new interaction on each section element. Set the trigger for the interaction to be when the purchase button is clicked.
Set the interaction action for the sections: In each interaction, set the action to show the respective section when the purchase button is clicked.
Preview and test: Preview the page in Webflow's designer mode or publish it to a live site to test the functionality. Make sure that the purchase button only appears after the video finishes playing and that the sections are shown or hidden correctly when the button is clicked.

Additional questions:

How do I create a video element in Webflow?
Can I embed a video from an external source in Webflow?
How can I create interactions in Webflow?

How can I create a button in Webflow that switches the text content on a page between Japanese and English upon clicking?

Is it possible to require all fields in one step of a slider form to be completed before the user can proceed to the next step in Webflow?

How can conditional visibility be enabled on a Webflow form based on a value selected from a drop-down?

Is it possible to build an assessment tool in Webflow where users can choose their most and least preferred options for each card and capture these choices for later use? Should I consider building it outside of Webflow and linking it to my Webflow site instead?

Is Webflow Logic only available to select customers or is there a delay in receiving beta access?

Is it possible to enable the "add to cart" button only after a selection has been made in the size variant form-field on a webflow ecommerce site?

Have you experienced slow performance with Webflow's logic editor recently? If so, have you found any solutions or workarounds?

What is the purpose of the PHP code in the mail.php file and how does it relate to the contact form on the website?

How can I use conditional visibility in Webflow to show only specific project images based on the chosen category filter?

Can Webflow's logic service be used to create a multi-step select form field like the one on the example site provided? If not, are there any API solutions available?