You can easily embed prototypes from tools such as Figma, Invision, Marvel and more right into Semplice by way of a Code module. Code modules accept raw HTML, Javascript, or iFrame code. In many cases, prototyping tools will provide an iFrame code that can be placed into a Code module to render the prototype on the page.

Getting your embed code

Each prototyping tool will contain an option to get an embed code, usually under sharing options. The code should look something like this:

<iframe width="494" height="1010" src="prototype-url-here" frameborder="0" allowfullscreen></iframe>

Placing the embed code

On the page where you want to render your prototype, place a Code module (not to be confused with an oEmbed module, which is for embedding media) onto the page. In the Code module options, paste in the iFrame code.

That's it!

Your prototype will now render on the page. You can of course adjust the width or height of your prototype in the iFrame code. 

Troubleshooting

Prototype is not showing

1. Ensure you are using a Code module and not an oEmbed module
2. In some cases, your hosting server may be blocking the connection from your prototyping service. You will need to contact your host to ensure the connection is being allowed.
3. Ensure the prototype project is live and not private

Prototype is too large or small, or isn't responsive

Sadly, a lot of the iFrame's display properties cannot be modified since they are set by the prototyping service and not editable by Semplice.

You can, however, resize the prototype by adding a transform property like this:

<iframe style="transform: scale(0.5)" width="494" height="1010" src="prototype-url-here" frameborder="0" allowfullscreen></iframe>

 You can also adjust the iFrame's display with custom CSS. Semplice cannot provide support for custom CSS support.