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?

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

How can I use logic interactions in Webflow to show/hide a question based on a user's selected answer?

How can I make the title appear/disappear on an Episode CMS Collection page based on whether or not a book is connected to the guest?

Is it possible to use attributes to search a string in Webflow that contains the value rather than being an exact match?

How can I create a form in Webflow that verifies if a user-entered ZIP code is within a defined service area before allowing them to submit the form?

Is there a glitch with a conditional visible element value causing a button to redirect to the homepage instead of the intended section on the same page in Webflow?

Is it possible in Webflow to use two conditional visibilities with an "or" operator instead of an "and" operator for displaying athlete statistics?

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?

How can I create a search function in Webflow that allows users to select a category and location, and then displays the results on a new page using the same CMS Collection?

Can I update custom fields in Webflow using a logic flow and a webhook?