Flex allows you to quickly embed third-party content like videos, forms, maps, or playlists into your experiences to increase engagement and interactivity.
How to embed content in a Flex experience:
Generate an embed code from the desired third-party app or web page and copy it to your clipboard
While in Design mode, select the Custom embed tool from the Toolbar on the left side of the Flex workspace
Click, hold, and drag out an embed frame on the canvas, which you'll be able to adjust the size of later if necessary
Navigate to the "Embed" section of the Inspector Panel and paste the third-party embed code in the embed field
After pasting the embed code, you may notice that a checkbox labeled "Fit to frame" will be automatically checked. Keeping this checked will scale the embedded content to fit the embed frame you drew. You can uncheck this box to manually resize the dimensions of the embedded content (useful for content like social media posts) from within the embed code (read more below).
After following these steps, the embedded content should appear on the canvas within the embed frame you created.
How to resize or manually adjust embedded content:
Once you've embedded third-party content on the canvas, you can easily resize and adjust the dimensions of the embed frame to fit your desired layout.
To resize the embed frame:
Select the embed frame
Click, hold, and drag any of the bounding box squares to resize the embed frame
You can hold down the SHIFT key to maintain the frame's aspect ratio while doing this
To manually adjust the dimensions of the embedded content:
Select the embed frame
Uncheck the "Fit to frame" checkbox under the "Embed" section of the Inspector Panel
In the embed code you pasted into the embed field, find and adjust the "height" and "width" values of the iframe (eg, iframe width="1280" height="720")
This will only adjust the size of the embedded content within the embed frame, not the size of the actual embed frame
Ensuring Responsiveness with Embedded Content
Embedded content on the canvas may not scale appropriately between variants if not set up correctly. Below are considerations to ensure your embedded content scales responsively:
Use responsive embed codes: If the third-party embed code you are using has fixed dimensions (width and height), it won't scale as the embed frame responsively scales to different screen widths. Instead, the embedded frame itself will scale responsively, but the embedded content will not, causing it to be cut off.
Use Relevant Sizing: Relevant sizing refers to content sizing by a percentage of the canvas's overall width or height, rather than a fixed size based on pixels. For example, if an embed frame's width is set to 75% of the canvas's width on desktop, it will also hold the same percentage on tablet or mobile. In contrast, if the embed frame's width was set to a fixed 1280px but the mobile variant's canvas was only 800px, the frame would not fit on the canvas.
Breakpoint overrides: If a responsive embed code is unobtainable for the third-party content, you can override the experience's breakpoints and manually set the embed frame size per variant. Doing so will cause the embed frame to "snap" to the set size when the experience hits the set breakpoints for the corresponding variant.
What can be embedded in a Flex experience?
Any third-party content that generates an embed code can be embedded in an experience; however, below are the most optimized and common content we recommend embedding:
Video content:
YouTube
Wistia
Vimeo
Social media posts:
Instagram
Facebook
LinkedIn
Surveys:
Google Forms
Hubspot
Survey Monkey
Data visualization:
Graphy
Misc rich content:
Google Maps
Spotify