Importing External Content in Framer

If you want to import external content in Framer, use the Embed component. Most iFrame/widget/script-based services connect through this method, and the usage is relatively simple, so feel free to follow along.

Embedding a URL

If you wish to insert another site's or service page in iFrame format, follow these steps.

1. Navigate to the Insert menu.

2. Enter “Embed” in the search bar.

3. Drag the Embed component onto the canvas.

4. Enter the desired URL into the component.

Note: Some websites block iFrame insertion through HTTP header settings.

Embedding a Script

For services that need to include iframe within a script, use the following method.

1. Add the Embed component to the canvas.

2. Select the HTML button in the right panel.

3. Paste the <script>...</script> code into the HTML section.

Frequently Asked Questions (FAQ)

Q. Does embedding scripts sometimes not display correctly?

• Yes. Some services require additional code to be manually entered for proper display. Make sure to check if extra code is needed before embedding the scripts.

Q. Can I make the Embed component responsive?

• Yes. Since the Embed component is essentially a Frame layer, you can use properties like Fill or Relative to implement responsiveness.

Q. Can I place multiple external widgets on the same page and maintain performance?

• No, it's technically possible to add multiple external widgets. However, placing too many widgets on one page can make the page heavy and potentially degrade performance, so it's not recommended.

Conclusion

If everything is set up but still not displaying correctly, you can contact the support team through Framer's Contact Page for assistance.

This article is a translated and adapted content of Framer's official blog ‘How to add an iframe or embed script’.