SOLVED

Sharepoint online - Guided tours, feature tour, walk throughs

%3CLINGO-SUB%20id%3D%22lingo-sub-1062864%22%20slang%3D%22en-US%22%3ESharepoint%20online%20-%20Guided%20tours%2C%20feature%20tour%2C%20walk%20throughs%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-1062864%22%20slang%3D%22en-US%22%3E%3CP%3E%3CSTRONG%3ETLDR%3B%3C%2FSTRONG%3E%3C%2FP%3E%3CP%3EIs%20there%20a%20way%20to%20create%20in-app%20walkthroughs%2F%20guides%20tours%2F%20feature%20tours%20using%20open%20source%20packages%20like%20intro.js%2C%20chardin.js%2C%20joyride%2C%20bootstrap%2C%20HopScotch%2C%20Crumble%20with%20Modern%20SharePoint%20Online%20environment%3F%20I%20couldn't%20find%20any%20tutorials%20for%20the%20same.%20Since%20I%20am%20not%20a%20web%20developer%20I%20could%20not%20ascertain%20if%20this%20can%20work%20with%20the%20modern%20SharePoint%20Online%20site%20pages%20at%20all%3F%3C%2FP%3E%3CP%3E%3CSTRONG%3ELong%20version%3C%2FSTRONG%3E%3CSPAN%3E%26nbsp%3B%3C%2FSPAN%3EI%20am%20working%20on%20intranet%20design%2C%20using%20SharePoint%20online.%20This%20intranet%20serves%20as%20a%20knowledge%20base%2C%20a%20process%20workflow%20reference%2C%20and%20a%20collaborative%20tool.%20I%20am%20trying%20to%20put%20together%20a%20tutorial%20so%20that%20people%20can%20understand%20what%20the%20various%20web%20parts%20are.%20I%20have%20tried%20using%20ppt%2C%20video%2C%20sway%2C%20word%20doc%20but%20nothing%20seems%20to%20easy%20because%20the%20user%20needs%20to%20open%20up%20two%20different%20windows%20and%20need%20to%20simultaneously%20walk%20through%20both%20of%20them.%20That%20doesn't%20work%20at%20all%20for%20the%20mobile%20environment.%20I%20researched%20that%20websites%20like%20walkme%2C%20whatfix%2C%20inline%20etc.%20provide%20subscription%20services%20for%20the%20same.%20I%20am%20looking%20for%20open%20source%20free%20to%20use%20alternatives%20for%20the%20same.%20My%20researched%20shows%20there%20are%20several%20packages%20that%20can%20help%20with%20this%2C%20Joyride%2C%20intor.js%2C%20bootstrap%20etc.%20But%20I%20cannot%20ascertain%20if%20these%20can%20be%20used%20with%20the%20modern%20SharePoint%20online%20site%20pages.%3C%2FP%3E%3COL%3E%3CLI%3ECould%20someone%20guide%20me%20to%20a%20resource%20that%20shows%20how%20these%20and%20other%20packages%20can%20be%20set%20up%20to%20use%20within%20the%20SharePoint%20online%20environment%3F%3C%2FLI%3E%3CLI%3EDo%20I%20need%20to%20be%20worried%20about%20privacy%20and%20intranet%20content%20being%20exposed%20to%20third%20party%20apps%2F%20developers%20if%20I%20use%20these%20plugins%3F%3C%2FLI%3E%3CLI%3EAny%20other%20suggestions%20on%20creating%20walkthroughs%20for%20SharePoint%20online%20environment%20that%20work%20on%20mobile%20and%20desktop%3F%3C%2FLI%3E%3CLI%3EAny%20other%20places%20where%20I%20can%20post%20this%20question%3F%3C%2FLI%3E%3C%2FOL%3E%3CP%3EMy%20background%3A%20I%20am%20not%20a%20developer%20but%20I%20tinker%20with%20a%20lot%20of%20stuff%2C%20I%20generally%20use%20python%2C%20VBA%2C%20and%20few%20visual%20scripting%20languages%20for%20automation%20for%20engineering%20design%20and%20reporting.%3C%2FP%3E%3CP%3EAny%20help%20is%20appreciated.%3C%2FP%3E%3CP%3EThanks%2C%20Aditya%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-LABS%20id%3D%22lingo-labs-1062864%22%20slang%3D%22en-US%22%3E%3CLINGO-LABEL%3EAPIs%3C%2FLINGO-LABEL%3E%3CLINGO-LABEL%3EExtensibility%3C%2FLINGO-LABEL%3E%3CLINGO-LABEL%3EJquery%3C%2FLINGO-LABEL%3E%3CLINGO-LABEL%3EJson%3C%2FLINGO-LABEL%3E%3CLINGO-LABEL%3EModern%20Pages%3C%2FLINGO-LABEL%3E%3C%2FLINGO-LABS%3E%3CLINGO-SUB%20id%3D%22lingo-sub-1068046%22%20slang%3D%22en-US%22%3ERe%3A%20Sharepoint%20online%20-%20Guided%20tours%2C%20feature%20tour%2C%20walk%20throughs%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-1068046%22%20slang%3D%22en-US%22%3E%3CP%3EHi%26nbsp%3B%3CA%20href%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fuser%2Fviewprofilepage%2Fuser-id%2F364587%22%20target%3D%22_blank%22%3E%40adika07%3C%2FA%3E%26nbsp%3B%2C%3C%2FP%3E%3CP%3E%3CA%20href%3D%22https%3A%2F%2Fwww.federicoporceddu.com%2F2019%2F11%2F23%2Fsharepoint-modern-page-tutorial-an-spfx-tour-sample-webpart%2F%22%20target%3D%22_self%22%20rel%3D%22nofollow%20noopener%20noreferrer%20noopener%20noreferrer%22%3Ethis%20is%3C%2FA%3E%20my%20approach%20to%20adoption%20in%20SharePoint%20Online%20Modern%20Sites.%3C%2FP%3E%3CP%3EThis%20is%20a%20sample%2C%20just%20to%20share%20with%20the%20community%20a%20possible%20approach%20using%20SPFx%20(SharePoint%20Framework).%20Source%20code%20is%20available%20in%20github%2C%20and%2019th%20December%20I'll%20show%20it%20with%20a%20small%20demos%20during%20SharePoint%20community%20call.%3C%2FP%3E%3CP%3EAnother%20solution%20could%20be%203th%20parties%20tool%20(like%26nbsp%3B%3CA%20href%3D%22https%3A%2F%2Fhappit.com%2F%22%20target%3D%22_blank%22%20rel%3D%22nofollow%20noopener%20noreferrer%20noopener%20noreferrer%22%3Ehttps%3A%2F%2Fhappit.com%2F%3C%2FA%3E)%20but%20I%20never%20used%20it%2C%20just%20listen%20about%20it.%3CBR%20%2F%3ECheers!%3C%2FP%3E%3CP%3EFederico%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3C%2FLINGO-BODY%3E
Highlighted
New Contributor

TLDR;

Is there a way to create in-app walkthroughs/ guides tours/ feature tours using open source packages like intro.js, chardin.js, joyride, bootstrap, HopScotch, Crumble with Modern SharePoint Online environment? I couldn't find any tutorials for the same. Since I am not a web developer I could not ascertain if this can work with the modern SharePoint Online site pages at all?

Long version I am working on intranet design, using SharePoint online. This intranet serves as a knowledge base, a process workflow reference, and a collaborative tool. I am trying to put together a tutorial so that people can understand what the various web parts are. I have tried using ppt, video, sway, word doc but nothing seems to easy because the user needs to open up two different windows and need to simultaneously walk through both of them. That doesn't work at all for the mobile environment. I researched that websites like walkme, whatfix, inline etc. provide subscription services for the same. I am looking for open source free to use alternatives for the same. My researched shows there are several packages that can help with this, Joyride, intor.js, bootstrap etc. But I cannot ascertain if these can be used with the modern SharePoint online site pages.

  1. Could someone guide me to a resource that shows how these and other packages can be set up to use within the SharePoint online environment?
  2. Do I need to be worried about privacy and intranet content being exposed to third party apps/ developers if I use these plugins?
  3. Any other suggestions on creating walkthroughs for SharePoint online environment that work on mobile and desktop?
  4. Any other places where I can post this question?

My background: I am not a developer but I tinker with a lot of stuff, I generally use python, VBA, and few visual scripting languages for automation for engineering design and reporting.

Any help is appreciated.

Thanks, Aditya

1 Reply
Highlighted
Best Response confirmed by adika07 (New Contributor)
Solution

Hi @adika07 ,

this is my approach to adoption in SharePoint Online Modern Sites.

This is a sample, just to share with the community a possible approach using SPFx (SharePoint Framework). Source code is available in github, and 19th December I'll show it with a small demos during SharePoint community call.

Another solution could be 3th parties tool (like https://happit.com/) but I never used it, just listen about it.
Cheers!

Federico