Embedding videos, images, and forms

Elevate your workflows by integrating videos, forms, and images directly into your Userflow content to foster a more captivating, interactive experience. Utilizing various media formats enhances the user journey and can often express intricate concepts more efficiently, ultimately resulting in improved user involvement and contentment.

Videos and forms

You can incorporate videos from your preferred video service using our video embedding feature. Likewise, you can integrate online forms, such as Typeform surveys.

How to embed

1. Click the + menu in the top right of any content field and select Embed. (If you don’t see the toolbar, click inside the editable field to activate it.)
   

2. Enter the URL of your video or form. (See troubleshooting note below.)

3. (Optional) Adjust how the video displays (width, size, margins).
   

Auto-play videos

To start videos automatically when users reach that step, add ?autoplay=1 to the end  of your video URL before embedding.

Example:

• Original: https://youtu.be/a75Ff8WoLFI?si=hKPCrYtEuIEXkhQy

• Auto-play enabled: https://youtu.be/a75Ff8WoLFI?si=hKPCrYtEuIEXkhQy?autoplay=1

Note: Auto-play parameters may vary by platform. Common variations include:

• Youtube/Loom: ?autoplay=1

• Vimeo: ?autoplay=1&muted=1

• Wistia: ?autoPlay=true

Images

With images, you can either upload an image file or insert a URL.

How to add images

1. Click the + menu in the top right of any content field and select Image. (If you don’t see the toolbar, click inside the editable field to activate it.)
   

2. Choose one of two options:

   Upload: Select a file from your computer
   Link: Enter the URL of a hosted image

Troubleshooting

Embed not displaying?

• Verify the URL is publicly accessible.

• Check if the content provider allows embedding.

• Some platforms require specific embed URLs rather than regular viewing URLs.

User data not passing to embedded forms?

When embedding forms using iframes, URL parameters formatted with#(hash) are processed only on the client side and won’t be passed to the embedded content. This can prevent user attributes (such as email, name, or user ID) from reaching the embedded form, resulting in empty or missing response fields.

To ensure user attributes are properly passed to embedded forms, use ? (question mark_ for URL parameters instead of #. Parameters formatted with ? are processed server-side and will successfully pass through to the embedded content, allowing all user data to be captured correctly.

• Use ? instead of # for URL parameters to ensure data passes correctly through the iframe.

• Example: form.com?email={{email}} instead of form.com#email={{email}}