How to embed
Dribdat is highly customizable, and can be used to accelerate your events by embedding different Web applications. Often, a hackathon team may also want to embed an interactive Demo of their project. The process is generally the same in each case. On this page we also have some instructions for popular tools and alternatives for whiteboarding and prototyping.
- Obtain a full-screen URL from your target platform
This is the Internet address to a view directly into your shared project, ideally without the requirement for the visitor to sign in or navigate somewhere else. The location of this link varies from platform to platform, and is sometimes called "Embed code", "Web sharing" or "IFRAME". If you can choose between 'HTML' or 'JavaScript' embed code, choose HTML.
Make sure that public sharing is active, so that 'anyone with the link' can at least view the content. You may still wish to limit Editing access to your team members. The screenshot above is from the sharing > embed link on a public Vimeo film.
- Paste the URL into the Demo Link of a Dribdat project page
If you paste in the HTML code, like in the example shown above, it should be automatically stripped away and only the link to the frame will be kept. But if this does not happen, you may need to do it yourself. Just keep everything within the quotes of the src="..." attribute.
- Check the "Embed this page" option in Dribdat
This is enabled by default, embedding your content prominently at the top of the project page. There is also a "full screen" link directly underneath the frame, and a "Open" button at the bottom of the project page pointing to the same location.
If you disable embedding, only the link will just appear at the bottom of the page. So if you have problems getting the embed to work - for example, this may be due to CORS restrictions on the Web server you are trying to use.
Here is the step-by-step guide on how to embed:
Option 1:
- Open your Miro board and click on the button "export this board"
- Select "</< Embed" and copy the iframe code
- Paste it to a clipboard and keep only the URL part, i.e. https://miro.com/app/live-embed/o9J_lcyRnK0=/?moveToViewport=-909,-777,2724,1421
- You can force the board to load automatically by adding "&embedAutoplay=true" at the end of the link, ex: https://miro.com/app/live-embed/o9J_lcyRnK0=/?moveToViewport=-909,-777,2724,1421&embedAutoplay=true
Option 2:
- Open your Miro board and copy the URL e.g. https://miro.com/app/board/o9J_lcyRnK0=/
- Replace ‘board’ with ‘live-embed’ e.g. https://miro.com/app/live-embed/o9J_lcyRnK0=/
- You can force the board to load automatically by adding "?embedAutoplay=true" at the end of the link, ex: https://miro.com/app/live-embed/o9J_lcyRnK0=/?embedAutoplay=true
Follow the general instructions above.