Learn

Document Widgets

Image
You can insert images to your documents in three ways :
  • Search from Unsplash galleries
  • Embed with URL , or
  • Upload from your computer
Then you can change the alignment and width of the image from the top toolbar, and provide a subtitle below the image.
Video
You can add videos to your documents from various streaming services including YouTube, Facebook, Twitch, SoundCloud, Streamable, Vimeo, Wistia, Mixcloud, and DailyMotion .
After inserting the video widget, copy and paste the URL of the video to the top toolbar.
You can also change the alignment, width, and height of the widget from the toolbar.
Lottie Animations
It is very easy to use Lottie animations in your documents.
Lottie is a high-quality After Effects animations played on the web. You can browse Lottiefiels for beautiful and high-quality animations and then copy the animation URL to your widget.
You can then change the alignment, width, and height of the widget and playback speed of the animation from the toolbar.
Link Blocks
You can use Link blocks for displaying and previewing external or internal links .
After inserting the widget, paste the URL of the link to be redirected.
You can display an image in the card along with a title and short description , all of which can be styled from the toolbar.
You can copy a document page's internal link from the navigation item in the left sidebar
Two-Columned Layout Blocks
With this widget, you can display content side-by-side in two columns. For each column, you can insert any widget available in the wizard.
To remove content from a column, move the mouse over the column and then click on the Delete icon which is on the top corners of the column.
Spacer Between Blocks
You can use the spacer widget to insert vertical spacing between two blocks.
It is also possible to give the bottom margin to each widget which is placed below the widget itself and is activated when the mouse is over the bottom margin area.
Divider Between Blocks
You can use the divider widget to insert horizontal lines between blocks .
Divider color can be set globally from the document Style Editor .
Embed Online Content
You can embed any online content in your documents if the URL of the content is allowed to be viewed in iframes outside of the original domain.
After inserting the iFrame widget, copy and paste the URL of the content to the top toolbar.
You can also change the alignment, width, and height of the widget from the toolbar.
The Example below shows embedding an interactive online coding environment from Codesandbox .
Figma Live Embed
You can embed real-time Figma designs and prototypes in your documents.
After inserting the widget, click the Share button inside a Figma file and copy the link to the file . Then paste the copied URL to the top toolbar of widget.
If you want to embed only a single frame from the Figma file, then check the "Link to selected frame" option on the share dialog.
You can also change the alignment, width, and height of the widget from the toolbar.