How to embed Sway into a website

There are multiple ways to share a Sway with others, whether with individuals or groups. In addition to sharing via a link, you can also embed a Sway directly into your website. This allows your interactive content to be displayed on the web page itself, eliminating the need to share links separately.

Embedding a Sway provides greater flexibility in how you present your content. Instead of managing multiple sharing links, you can direct users to a single web page where the Sway is always accessible. Since Sway is mobile-responsive, it automatically adjusts to different screen sizes, ensuring a seamless experience on both desktop and mobile devices.

Follow these steps to embed a Sway into your website:

Create or Open Your Sway

1. Open the https://sway.cloud.microsoft/ homepage.
2. Log in with your Microsoft 365 username and password as needed.
3. Create or open a new Sway or open an existing file. If you are new to Sway, check out How to create a digital presentation using Sway.
4. Click on the Share button in the top-right corner of the Sway interface:

5. In the Share your Sway with window, be sure to choose WHO you want to have access to the Sway. If you want to embed the Sway on a website, you will need to select Anyone with a link.
6. Now click the Get embed code option:

7. Click Copy to Clipboard.

Add the Embed Code to Your Website

The Internet has lots of platforms which allows you to build your own website, from HTML code to content management systems such as WordPress and Wix. Obviously it’s a little hard to include instructions for all of these platforms. I personally use WordPress so have included the steps below for it however any other platform will provide instructions on how to insert a embed code into your specific platform.

For WordPress Users

If you are using the default WordPress Block Editor:

1. Log in to your WordPress Dashboard.
2. Open the page or post you want to include the embedded Sway into.
3. Add the Custom HTML block.

4. Paste the embed code into the block.
5. Publish the post or page.
6. Preview the post or page to see the embedded Sway.

For Other Website Platforms

1. Access the HTML editor for the webpage where you want to embed the Sway.
2. Paste the embed code in the desired location.
3. Save the webpage.

Here are some support articles for some other popular platforms:

• Embed blocks in Squarespace.
• Embeds and Codes in Wix.

Edit the Sway Dimensions

When embedding a Sway within your website, you should consider the dimensions, or size of the Sway. This should fit well with the layout of the web page to avoid any issues with visitors viewing it correctly.

The embed code used with Sway is a HTML tag called an iFrame. The iFrame tag contains information such as the source URL of the content being displayed plus often will include the height and width settings. The height and width settings can be changed to adjust the physical size of the Sway on the webpage.

To edit the Sway dimensions:

1. Get the embed code from your Sway.
2. Paste the code into a editing program such as Microsoft Word or Notepad.
3. Locate the width=” “ and height=” “ portion of the code.

4. Edit the values as needed making sure to include the “px” measurement and not to accidentally delete a quotation (“) symbol.
5. Select the entire embed code.
6. Copy it.
7. Paste the new code into your web page.
8. Alternatively, you can edit the code directly after you have pasted it into your web page.
9. Save the changes.

Embedding a Sway into your website is a great way to showcase interactive content without requiring users to navigate away from your page. Whether you’re using WordPress, Wix, or another platform, the process is straightforward and offers flexibility in how you present your Sway. By adjusting the embed dimensions, you can ensure the content fits seamlessly within your website’s design. Now that you know how to embed a Sway, take advantage of this feature to create engaging and dynamic web experiences for your audience. Comment below with any questions.