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

Embedding widgets from your AchieveIt dashboards to external platforms (like SharePoint or your company intranet) can enhance visibility, engagement, and cross-team collaboration for those in your organization working primarily outside of AchieveIt or with limited access to AchieveIt data. By bringing your AchieveIt data directly into the flow of other users' daily workstreams, you can actually increase the impact of your AchieveIt dashboards and reports.  

 

By generating a simple HTML embed code from any dashboard widget, you can:

  • Break down silos: Surface important data in the tools people already use.
  • Save time: Eliminate manual reports—data updates automatically.
  • Ensure alignment: Keep everyone on the same page with consistent, up-to-date KPIs.

Metric, Progress, List and Custom Content widgets 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 or applications like SharePoint and Confluence.

To generate an embed code from a widget, open the dashboard in View Mode. Click the triple-dot button in the top right-hand corner to open the Actions menu and select 'Embed Widget' to open the Embed Widget window. 

 

Screen_Shot_2022-02-01_at_11.40.54_AM.png

The Embed Widget option in the triple-dot (...) menu

The Embed Widget Window

The 'Embed Widget' window has a single text field, with a copy button to its right. This field contains 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). Once copied, you can paste the code into any external page’s embed or HTML section (for example, in SharePoint via the “Embed” web part).

 

Screen_Shot_2022-02-01_at_11.50.46_AM.png

The Embed Widget window

Embedding the Widget in Sharepoint

We'll use SharePoint as an example for embedding widgets. Log in to your organization's Sharepoint and select “Pages” from the main menu (generally located on the left-hand side of the page). 

 

embed_widget_image_actual_1.png

The Pages selection in the left side navigation bar

 

After selecting 'Pages', you can either click on the existing page you’d like to add to or click 'New' to create a new page. If editing an existing page, click the 'Edit' button 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 a setup menu will appear on the right side of the page. 

 

In the setup menu, paste your embed code : 

     

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 the ability for you to create a page on your site or give you the ability to edit an existing page
  • Your SharePoint Administrator may need to add my.achieveit.com to the approved list of sites that you can embed from
  • You can embed multiple widgets on the same page, allowing you to create a customizable view into your AchieveIt dashboards