Digital Spaces are meant to be shared and explored on the web! One common way content is shared on the internet is by embedding.
What is embedding?
Embedding is a widely used technique in web development that allows you to incorporate content from one website directly into another website. This process involves using a small piece of HTML code to display content such as videos, images, social media posts, or interactive elements like maps and games. One of the most common tools for embedding is an "iframe" (short for inline frame), which acts like a window on your webpage, showing content from another site without redirecting the user away from your page. The iframe tag defines a rectangular region within your webpage where the external content is displayed, and you can specify its dimensions, border, and other attributes. Embedding content, like a Digital Space from digitalspaces.io, is as straightforward as embedding a YouTube video: you simply copy the provided iframe code and paste it into the HTML of your webpage where you want the content to appear. This simple yet powerful technique enriches the user experience by seamlessly integrating diverse and dynamic content right into your site's structure.
Embed Code Example
<iframe width='100%' height='100%' src='https://app.digitalspaces.io/share/otDdxedw9l6Dpbjd' frameborder='0' allow='accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture' allowfullscreen></iframe>
How To Copy Your Digital Space Embed Code
From your Project's Page, navigate to the top right corner
Select the Embed button and click Copy
That is it! Your Embed code has been copied!
What To Do With Your Embed Code
Now that your code is copied, you can place it on your website.
By default, we provide you iframe code with a width of 560px and a height of 315px. Chances are this will not be the ideal size for your website. We recommend you change these values to match your web layout and design. You may also apply any CSS values to this code and can treat it as any regular HTML element.
We have provided some instructions for using this code on popular website builders below. Feel free to contact us by chat in the bottom right corner if you have any questions or need assistance with your iframe embed code!
Placing Embed Code On A Custom Site
Pasting your iframe on a custom site is as easy as "paste". If you are building a custom site, we assume you are familiar with the HTML element <iframe> so you should be off and running.
Placing Embed Code On A Webflow Site
From the Elements Panel, Add Embed from the Advanced Menu
In the HTML Embed Settings, Paste your code.
Feel free to adjust the width and height to match your design.
You're done!
Placing Embed Code On A WordPress Website
Follow the link below to learn how to place embed code on your WordPress site.
Placing Embed Code on a Squarespace Website
Ignore steps 1 & 2 if you have a section you would like to place the code into.
From your Site Editor, Create a new Section
Add a blank section
Add a new Block
Select Embed
Edit the Embed Block
Navigate to "Code Snippet" and select "Embed data"
Paste your code into the data form
Feel free to adjust the Width and Height of your iframe to match your site design
Still need help?
We are always working to improve our documentation. Please reach out in the chat (bottom right corner) or email support@digitalspaces.io with any comments, questions, or suggestions!