How to embed Microsoft Loop pages in SharePoint

By João Ferreira Oct 16, 2023 Intranet 11 Comments

Microsoft Loop is a game-changer in collaboration, communication, and information sharing within teams and across organizations. With its intuitive interface and robust capabilities, Loop has revolutionized the way we work together within Microsoft 365, enabling seamless content creation and management.

To bring collaboration to the next level and to take advantage of your intranet in this blog post I’m showing how you can embed Microsoft Loop pages in SharePoint pages.

Microsoft Loop in SharePoint pages

To take advantage of Microsoft Loop in SharePoint you should do the following:

Open the Microsoft Loop page you want to embed in SharePoint
At the top right corner click on Share
On the menu click on Loop component
Click Settings to adjust the permissions to your needs and define who will have access to this Loop page
Click Copy to get the link to the Loop page in your clipboard
Open the SharePoint page where you want to add the Loop component and click Edit
Add the Embed web part to the page
Instead of pasting the URL of the loop page directly let’s use an iframe tag instead. Use the code below and replace the value in the src attribute
```
<iframe src="FORM_URL" height="700px" width="100%"></iframe>
```
Save the page and Publish it

Every user will be able to access and contribute to the loop component directly from your intranet and you can add more resources to the page to complement the information in Microsoft Loop.

Microsoft Loop in SharePoint pages

In conclusion, the integration of Microsoft Loop pages within your SharePoint intranet is a transformative step towards enhancing collaboration, knowledge sharing, and productivity within your organization. By seamlessly embedding Loop components in your intranet, you empower every user to access and contribute to the wealth of information and insights stored in Loop pages.

11 Responses to “How to embed Microsoft Loop pages in SharePoint”

Manuel
October 18, 2023

Thanks for this post I really like this feature as there are many use cases in my company.

One question: how did you achieve to embed the loop component without displaying the left navigation bar?

I just tried to embed a loop workspace as component as well to embed a sole loop component (copied from a teams chat).

Thank you!
- João Ferreira
  November 16, 2023
  
  Hi Manuel,
  
  As far as I know is not possible to embed components as Microsoft Teams app does.
  To embed a component created in a Teams chat you will need to add it first to a workspace and then embed the workspace. This approach will always show the loop navigation.
  - Yann
    December 14, 2023
    
    Hello João,
    
    First of all, great article ! it’s very helpful.
    
    I second the question of Manuel, is there a way to hide the left menu bar ?
    
    I copied the component directly from Loop (like you did it seems) but this menu always appear, I can use the icon to “Close Sidebar” but by default it is open and I don’t like how it looks on a SP page.
    
    Thank you
    Yann
    - João Ferreira
      January 26, 2024
      
      Hi Yann,
      
      Thanks.
      There is no way to close the side panel by default, I’ll update this article if I find something to do it.
      
      Have a nice day 🙂
  - Ivy M
    December 14, 2023
    
    Hi there, I created the Loop component from Loop workspaces and I’m still getting the left sidebar also. Any other thoughts?
    - João Ferreira
      January 26, 2024
      
      Looks like it will be always there by default. Nothing that we can do right now to fix it 🙁
      
      Have a nice day
João Ferreira
January 26, 2024

Hi Angela,

Can you please press F12 to open the developer tools and let me know if you see any error related with loop in the SharePoint page?
I just tested the component and it works just fine.

Have a nice day 🙂
Cristin
January 26, 2024

I have the same issue as Angela. Here is the error in dev tools:
Uncaught (in promise) BrowserAuthError: redirect_in_iframe: Redirects are not supported for iframed or brokered applications. Please ensure you are using MSAL.js in a top frame of the window if using the redirect APIs, or use the popup APIs.

I believe it is waiting for me to log-in again to Loop when it is trying to load it, but it doesn’t give the redirect to allow for logging in. What do you think?
- João Ferreira
  February 2, 2024
  
  Hi Cristin,
  
  It is not able to access the information about your login from the iframe and MSAL no longer works in iframes. Does this happen to you in all browsers? Does it happen even after opening loop in a separate tab?
  
  Have a nice day 🙂
Philipp Wilhelm
January 31, 2024

Hi

The integration in sharepoint worked great for me online.

If i open sharepoint directly in teams however, de loop component ist just displayed as a blank box.
Is there a fix for this?
- João Ferreira
  February 2, 2024
  
  Hi Philipp,
  
  I don’t think there will be a solution for this, the problem is probably replated with the 3rd party cookies that are not being blocked everywhere.
  
  Have a nice day 🙂