Embedding a Widget on an External Site (e.g. Sharepoint)

Previous Article: Editing and Deleting a Widget

Most widgets in your dashboards can be embedded into external sites using an embed code. This code is a piece of HTML code that can be embedded into other sites, including applications like Sharepoint and Confluence.

To generate an embed code from a widget, navigate to the dashboard that with you preferred widget. Find the widget you want to embed and click on the ... button in the top right corner of the widget (make sure you are in View Mode, as this option does not show up in Edit Mode)

In the dropdown, select the "Embed Widget" option. A popup will show with the title "Embed Widget".

Screen_Shot_2022-02-01_at_11.40.54_AM.png

The Embed Widget option in the ... dropdown

The Embed Widget Window

The "Embed Widget" window only has a single text field, with a copy button to its right. This text field has the generated HTML embed code, which you can copy by clicking on the "Copy" button on the right (or copying using the clipboard via Control + C on Windows or Command + C on Mac). You can now use this generated HTML code to embed this widget onto an external site.

 

Screen_Shot_2022-02-01_at_11.50.46_AM.png

The Embed Widget window

Embedding the Widget in Sharepoint

Navigate to your company Sharepoint site and select “Pages” from the left hand side.

 

embed_widget_image_actual_1.png

The Pages selection in the left side navigation bar

 

After selecting "Pages", you can either click to the existing page you’d like to add a widget or click to create a new page.

If editing an existing page click the “Edit” in the upper right hand corner. If creating a new page you will automatically be in “Edit” mode. Once in “Edit” mode click the plus icon where you’d like to embed the widget. (You may need to hover over the section to see this)

 

embed_widget_image_2.png

Editing a page in Sharepoint

 

Using the Search field type “Embed” and select from the search results. 

 

embed_widget_image_3.png

Searching for an embed

Click “Add Embed Code” and on the right hand side you’ll paste the embed widget link that you got from your AchieveIt dashboard in step 2.     

       

embed_widget_image_4.png

Adding the embed code

You should now see your embedded widget on the page. Click “Publish” and you’ll be able to see the widget on your site!

 

Things to note:

  • Your Sharepoint Administrator may need to enable to ability for you to create a page on your site or give you the ability to edit an existing page
  • Your Sharepoint Aministrator may need to add my.achieveit.com to the list of sites that you are able to embed from
  • You can embed multiple widgets on the same page allowing you to create a customizable view into your AchieveIt dashboards

 

Next Article: Giving Access to a Dashboard