How to add the status notification to a Sharepoint Online page?

Jeff Wiens

Is there any way to display the status page box on a Sharepoint Online page?  From all my research and testing, you can't embed a <script> block on Modern Sharepoint Online pages.

My goal is to have the status box appear on our corporate Sharepoint Online page for the end-users to see without them having to click a separate link and visit the status page itself which they are unlikely to do.

Thanks in advance for any ideas or suggestions you have!

Egor_abdi6j

Hey Jeff, 
Thanks for reaching out to Atlassian Community!

To display the Statuspage status box on a Sharepoint Online page, you can use an iframe to embed the status box, as Sharepoint Online modern pages do not support embedding <script> blocks directly. Here’s how you can do it:

1. Generate the Embeddable Widget URL:

Go to your Statuspage management page.

Navigate to Customize page > Embed.

Copy the URL for the embeddable widget or status box. It should look something like this: https://YOUR_STATUSPAGE_URL/embed/status

2. Create an Embed Code with an iframe:

Use the following iframe code, replacing YOUR_STATUSPAGE_URL with your actual Statuspage URL:

<iframe src="https://YOUR_STATUSPAGE_URL/embed/status" width="100%" height="400px" frameborder="0"></iframe>

3. Embed the iframe in Sharepoint Online:

Go to your Sharepoint Online site.

Navigate to the page where you want to embed the status box.

Click on the Edit button to edit the page.

Click on the + icon to add a new web part.

Select the Embed web part.

Paste the iframe code into the embed web part:

<iframe src="https://YOUR_STATUSPAGE_URL/embed/status" width="100%" height="400px" frameborder="0"></iframe>

Click on the Republish button to save the changes.

<iframe src="https://yourcompany.statuspage.io/embed/status" width="100%" height="400px" frameborder="0"></iframe>

 

Additional Customization:

Width and Height: Adjust the width and height values in the iframe code to fit your Sharepoint page layout.

Responsive Design: Ensure that the iframe is responsive by using percentage values for width and appropriate height values.

I hope this helps! 

Best Regards,
Egor