Summary

Learn how to use Docaroo components to embed rich media into your content. We do not encourage to store large media on your doc-contents folder. Since this is a documentation site, the access to the media files should be public since we don’t have a backend to make the requests to get the media, thus any private access key cannot be exposed.

Figma files

Currently we support design, boards (fig jam), slides and deck files. Prototypes are not supported for the moment, we are working on this.

Limitations and warnings:

  • any file you embed must be public, be careful with granting permissions
  • design, board and slides files can be opened in Figma, thus users can comment, use this types of files if you want to collect feedback
  • slides files my not work well on mobile, test them before releasing to your users
  • deck and prototype cannot be opened in Figma, this is the best way to publish information from Figma since you can maintain your design and boards private. However, it may add some extra maintenance work for fig jam files. While design files are always in sync with the prototype derived from them, the board files are not, thus you may need to put them in slides before publishing as decks and this can generate some extra work when you change something in the board file (you need to manually update the slides)

You have to be aware that your visitors can open the embedded file in Figma. View only permission will allow the visitors to post comments which can be viewed and replied to by any other visitor. If you don’t want this to happen, we recommend to embed deck and prototype Figma files.

Design

Embed Figma design, starting from a specific node, with a thin border around it.

{% include elements/figma.html what="design" 
    file="vJEs0lhqI4OnqzaZBKeR4k" 
    node="10-2&t=W2N493rkaJxxmBy0-4" 
    footer="true" 
    border="true" 
%}

Open in Figma

Fig jam

Embed Figma board, starting from the root node, with a thin border around it.

{% include elements/figma.html 
    what="board" 
    file="jNZumE2gKxP4PE8fZBBxJt" 
    node="0-1" 
    border="true" 
%}

Open in Figma

Slides

To test if slides are embedded correctly on mobile, add testSlides="true" parameter to the include tag and check the page on mobile. If slides are shown correctly, leave it as is. If slides are not shown, remove the testSlides parameter from the include tag. The slides will be embedded on desktop and will be replaced with a link to the figma file on mobile.

{% include elements/figma.html 
    what="slides" 
    file="D4jLYCi1QWiKbPXuHrOOd8"
    border="true" 
%}

Open in Figma

Decks

{% include elements/figma.html 
    what="deck" 
    file="D4jLYCi1QWiKbPXuHrOOd8" 
    border="false" 
    h="400px" 
%}

Prototypes

elements/figma.html does not accept prototypes, it accepts only design, board, slides and deck files. If you try something like the following include (with anything else than the accepted file types), you will get an alert.

{% include elements/figma.html 
    what="proto" 
    file="D4jLYCi1QWiKbPXuHrOOd8" 
    border="false" 
    h="400px" 
%}

Video files

Youtube

{% capture moments %}
    text=Moment 1|sec=12,
    text=Moment 2|sec=37.2
{% endcapture %}

{% include elements/youtube.html 
    id="HFsPgkqMUzc" 
    width="640" 
    height="360"
    moments=moments
%}
YouTube Thumbnail

Vimeo

{% include elements/vimeo.html
    id="1089723439" 
    width="640" 
    height="360" 
%}
Vimeo Thumbnail

Graphics

Lottie animations

{% include elements/lottie.html 
    id="b9c3d8e8-0304-49ea-8c47-1fb872d8cae3/UUN7MtiRMP" 
    h=50 
    w=50 
    pad=0 
%}

On this page

Comments
Title : pageTitle
Reference : anchor