Design bundle for Confluence
Step-by-step installation guide
Log into your Confluence instance as an admin.
Click on settings at the top right of your screen.
Click Find new apps from the left-hand side of the page.
Find Design bundle for Confluence via search.
The appropriate app version appears in the search results.Click Try free to begin a new trial for Design bundle for Confluence
Click Start free trial, Confluence will now download and install our awesome app!
Congratulations, you now have 9 apps in 1 bundle!
Miro for Confluence
After installing the Design bundle for Confluence app, Miro will become available as a Confluence Macro. If you want to embed Miro into a Confluence page, log in to https://miro.com and select the board you want to embed.
Embed using the board URL
Miro for Confluence will automatically detect the board URL. Once you have selected the board in Miro, you can copy the URL from the address bar and paste it directly into your Confluence page. The Miro for Confluence macro will open automatically.
You can edit the macro to adjust the dimensions:
After selecting the macro, click on the Edit button to open the macro editor right side panel
Select the desired dimensions & click insert
Keep in mind that one of both dimensions (width & height) needs to be a css unit. Also note that height can only be an absolute unit (px, cm, etc) and not relative (%, em, etc)Publish your Confluence page & your Miro board will become visible!
Keep in mind that boards are read-only
Embed using the macro editor
When editing a page, click on the plus button at the top right of your screen and click on Other macro’s or View more
Search for Miro for Confluence. Click on Miro for Confluence
The macro editor right side panel will open, which will allow you to enter the URL of your Miro board
Select the desired dimensions & click insert
Keep in mind that one of both dimensions (width & height) needs to be a css unit. Also note that height can only be an absolute unit (px, cm, etc) and not relative (%, em, etc)Publish your Confluence page & your Miro board will become visible!
Keep in mind that scene’s are read-only
Using the embed code instead of the URL
In Miro, you can click on the Share button in the top left corner of your screen. This will open a menu. Click Embed. A modal will open with sharing options for free navigation or presentation mode. An iframe embed code is shown for each mode. Copy the embed code.
Embed using the code snippet in the macro editor
When editing a page, click on the plus button at the top right of your screen and click on Other macro’s or View more
Search for Miro for Confluence. Click on Miro for Confluence
The macro editor right side panel will open, which will allow you to enter the URL of your Miro board
Paste the embed code from Miro in the URL field
Select the desired dimensions & click insert
Keep in mind that one of both dimensions (width & height) needs to be a css unit. Also note that height can only be an absolute unit (px, cm, etc) and not relative (%, em, etc)Publish your Confluence page & your Miro board will become visible!
Keep in mind that boards are read-only
Framer for Confluence
After installing the Design bundle for Confluence app, Framer will become available as a Confluence Macro. If you want to embed Framer prototypes into a Confluence page, log in to https://framer.com and select the prototype you want to embed.
Embed using the prototype URL
Framer for Confluence will automatically detect the prototype URL. Once you have selected the prototype in Framer, click on the play button in the top right corner. Copy the URL from the address bar, or click on the Copy Link button in the top right corner and paste it directly into your Confluence page. The Framer for Confluence macro will open automatically.
You can edit the macro to adjust the dimensions:
After selecting the macro, click on the Edit button to open the macro editor right side panel
Select the desired dimensions & click insert
Keep in mind that one of both dimensions (width & height) needs to be a css unit. Also note that height can only be an absolute unit (px, cm, etc) and not relative (%, em, etc)Publish your Confluence page & your Framer prototype will become visible!
Keep in mind that boards are read-only
Embed using the macro editor
When editing a page, click on the plus button at the top right of your screen and click on Other macro’s or View more
Search for Framer for Confluence. Click on Framer for Confluence
The macro editor right side panel will open, which will allow you to enter the URL of your Framer prototype
Select the desired dimensions & click insert
Keep in mind that one of both dimensions (width & height) needs to be a css unit. Also note that height can only be an absolute unit (px, cm, etc) and not relative (%, em, etc)Publish your Confluence page & your Framer prototype will become visible!
Keep in mind that scene’s are read-only
ProtoPie for Confluence
After installing the Design bundle for Confluence app, ProtoPie will become available as a Confluence Macro. If you want to embed ProtoPie prototypes into a Confluence page, log in to https://protopie.io and select the prototype you want to embed.
Embed using the prototype URL
ProtoPie for Confluence will automatically detect the prototype URL. Once you have selected the prototype in ProtoPie, you can copy the URL from the address bar and paste it directly into your Confluence page. The ProtoPie for Confluence macro will open automatically.
You can edit the macro to adjust the dimensions:
After selecting the macro, click on the Edit button to open the macro editor right side panel
Select the desired dimensions & click insert
Keep in mind that one of both dimensions (width & height) needs to be a css unit. Also note that height can only be an absolute unit (px, cm, etc) and not relative (%, em, etc)Publish your Confluence page & your ProtoPie prototype will become visible!
Keep in mind that boards are read-only