Click here to download the SharePoint Page Guide Webpart.


*** The SharePoint Page Guide add-in works in conjunction with another add-in i.e. SharePoint Page Guide Web Part, which is only available from the SharePoint Page Guide Web Site. This requires installation on your environment outside of the Microsoft Office Store processes due the level of required permissions. A tenant administrator will need to deploy this specific add-in to the tenant app catalog site manually, so that it can be installed to your environment. We have added required step needs to be follow to install the another add-ins with the add-ins package you downloaded from the SharePoint Page Guide Web site. When apps are installed outside of the Microsoft Office Store, they may bypass any, and all, safety and security checks provided by Microsoft.

If you have not done so already, it is recommended that you establish contact with the SharePoint Page Guide Support before proceeding with installation. Consider trying this add-in on a separate SharePoint Tenancy before installing it on your primary SharePoint site(s).

SharePoint Page Guide client side web-part Deployment and Usage Instruction

Downlaod the package from the above link and unzip it. Package contains below listed two files:

  • spfx-sppageguide-webpart.sppkg (Modern – Client Web part)
  • SharePointPagaeGuide ClientWebpart Instruction Guide.pdf (Deployment & User Guide)

Deployment Instructions

  • We are assuming that app catalog site is already configured in your tenant. If not, kindly follow this link to configure app catalog in SharePoint Online.
  • Navigate to your App Catalog site and select Apps for SharePoint from left navigation.
  • Upload spfx-sppageguide-webpart.sppkg file over there. It will prompt you to trust the application. Click on Deploy button to add it into your site.
    Trust SharePointPagaeGuide Webpart
  • Once you click on Deploy button, spfx-sharepointpageguide-webpart is deployed in your tenant and it will be visible something like below screenshot.
    Web Part added to App Catalog successfully
  • Now navigate to desired site and go to Site Contents and click on Add an app.
    Search Page Guide Web Part
  • Once you click on it, it will be added to your site and ready to start page guide from the modern pages.
    Web Part added to site successfully

Usage of SharePoint Page Guide Web Part with Modern Pages

  • Navigate to respective modern page where you would like to add SharePoint Page Guide webpart and click on + sign.
    Add Web Part to Modern Page
  • Click on Pencil icon to edit the web-part property
    Web Part added to SharePoint Modern Pages
  • When you edit the SharePoint Page Guide Webpart, you will see below options in the property pane which appears right side of the browser.
    Configure Web Part Properties
    • Select Version: Based on app version you installed in your site, choose the respective version of the app. If your app title is like “SharePoint Page Guide – Free” then it’s free version of the app and you have to select Free in the Version dropdown otherwise select Premium.
    • Select Page Guide ID: Based on selection of the App Version, Guide ID will be populated into the Select Page Guide ID dropdown and select the Guide ID which you would like to render on the page.
    • Edit Page Guide in Builder: Based on selection of App version, when you click on Edit Page Guide in Builder, you’ll be redirected to Page Guide Builder of the Application to edit the existing guide details or create new page guide.
  • Upon selection of Version, Select Page Guide ID dropdown will be populated with the Guide ID mentioned at the time of creation of the Page Guide. Select respective Guide ID and Save the page and then publish it.
    Select Page Guide
  • Once you publish page, button with text "Start Page Guide" or Guide Title which you mentioned while building the Page Guide will be added to top right corner of the page, as displayed in below screenshot.
    Page Guide rendered on SharePoint Modern Pages
  • When you click on Start Page Guide button, page guide will be started on the page.
    Page Guide with Modern Page

Usage of SharePoint Page Guide web part with Classic Pages

  • Navigate to respective Classic Page where you would like to add SharePoint Page Guide webpart and edit the page from the gear icon.
  • Add Web Part to Classic Page.
    • Web Part Pages: If you would like to add SharePoint Page Guide web part to the Web Parts page, then go to respective page and edit it. Once you edit page, you will see the configured web part zones and already added web parts to that zones, click on Add a Web Part.
      Add Web Part to SharePoint Classic Page
    • Wiki/Article Pages: If you would like to add SharePoint Page Guide web part to the Wiki/Article Page, then go to respective page and edit it. After opening page in edit mode, set cursor to the place where you would like to add it. Then Click on Insert tab in the ribbon and click on Web Part.
      Add Web Part
  • Select CIRRUSSOFT under Categories and SharePoint Page Guide under Parts and click on Add button to add Web Part to the page.
    Select SharePoint Page Guide Web Part
  • Edit the SharePoint Page Guide web part and click on Configure button in Configure web part.
    Configure SharePoint Page Guide Web Part
  • Once you clicked on Configure button, it will open the property pane to configure the webpart.
    Configure Page Guide to render on the Classic Page
    • Select Version: Based on app version you installed in your site, choose the respective version of the app. If your app title is like “SharePoint Page Guide – Free” then it’s free version of the app and you have to select Free in the Version dropdown otherwise select Premium.
    • Select Page Guide ID: Based on selection of the App Version, Page Guide ID will be populated into the Select Page Guide ID dropdown, select the Guide ID which you would like to render on the page.
    • Edit Page Guide in Builder: Based on selection of App version, when you click on Edit Page Guide in Builder, you’ll be redirected to Page Guide Builder of the Application to edit the existing page guide details or create new page guide.
  • Upon selection of Version, Select Page Guide ID dropdown will be populated with the Guide ID mentioned at the time of creation of the Page Guide.
  • Close the configuration pane by clicking on close icon available at top right corner in the configuration pane.
  • Expand the Appearance configuration and set Chrome Type as None to hide the web part title from the web page.
  • Click on Ok button to save the web part configuration.
  • After successful configuration, button with text either of "Start Page Guide" or Guide Title, you mentioned while creation of page guide will be visible in the secondary ribbon at top right corner.
    Render Page Guide to SharePoint Classic Page