Embedding an HTML page

Embedding an HTML page in the artboard view

If you have another page that you'd like to embed in your artboard it might be better to use an iframe rather than combine the original page into the artboard page.

Here is how you would do that in a project with 2 artboards:

First select and export the artboard you want to embed (if it's not created already).

Next go to the artboard you want to embed a page into and add a rectangle to the page. That rectangle will represent the HTML page.

Open the Element Options panel or dialog and change the tag name to iframe and add a src attribute and value:

The source or src attribute points to the page you want to embed.

This can be a page you export from the project, an existing page in the same directory or subdirectory or a remote URL of a page online.

In this case the page we want to embed is named, "Page_2.html".

If you are testing your page in a browser locally using the file protocol a remote URL may not display correctly. A page in another directory may not display either. Either test on localhost or upload your page to your domain.

Artboard names cannot have spaces in them so if the artboard name is "Page 2" then the exported file name will be "Page_2.html".

Set the sub tag name to none since we don't need it.

Now export the selected artboard and view in the browser.

You should see Page 2 embedded in an iframe in Page 1:

<iframe>: The Inline Frame element - HTML: HyperText Markup Language | MDN