SOLVED

Insert script in the header of the Modern page- SharePoint Online

%3CLINGO-SUB%20id%3D%22lingo-sub-2475866%22%20slang%3D%22en-US%22%3EInsert%20script%20in%20the%20header%20of%20the%20Modern%20page-%20SharePoint%20Online%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-2475866%22%20slang%3D%22en-US%22%3E%3CP%3EHi%2C%3C%2FP%3E%3CP%3E%26nbsp%3BWe%20are%20redesigning%20our%20intranet%20and%20upgrading%20to%20the%20Modern%20SharePoint%20site.%20One%20of%20the%20requirements%20is%20to%20insert%20a%20script%20in%20the%20header%20and%20div%20tag%20on%20the%20homepage.%26nbsp%3B%20How%20do%20I%20go%20about%20setting%20this%20%3F%20The%20script%20and%20HTML%20tag%20are%20only%20loaded%20on%20the%20homepage%2C%20we%20don't%20plan%20to%20use%20them%20on%20other%20pages.%20It%20is%20a%20social%20feed%20from%20Curalate%20(Approved%20Instagram%20images).%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EAny%20help%20is%20appreciated.%26nbsp%3B%3C%2FP%3E%3CP%3EThanks%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-LABS%20id%3D%22lingo-labs-2475866%22%20slang%3D%22en-US%22%3E%3CLINGO-LABEL%3EDeveloper%3C%2FLINGO-LABEL%3E%3C%2FLINGO-LABS%3E%3CLINGO-SUB%20id%3D%22lingo-sub-2487697%22%20slang%3D%22en-US%22%3ERe%3A%20Insert%20script%20in%20the%20header%20of%20the%20Modern%20page-%20SharePoint%20Online%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-2487697%22%20slang%3D%22en-US%22%3E%3CP%3E%3CA%20href%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fuser%2Fviewprofilepage%2Fuser-id%2F552392%22%20target%3D%22_blank%22%3E%40Pbala%3C%2FA%3E%26nbsp%3BIf%20you%20want%20to%20a%20insert%20script%20only%20on%20single%20modern%20site%20page%2C%20you%20can%20use%26nbsp%3B%3CSTRONG%3EModern%20script%20editor%20web%20part%3C%2FSTRONG%3E%20developed%20by%20community%20members.%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3ECheck%20below%20links%20for%20script%20editor%20web%20parts%20(developed%20using%20SPFx)%3A%3C%2FP%3E%3COL%3E%3CLI%3E%3CA%20href%3D%22https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-webparts%2Ftree%2Fmaster%2Fsamples%2Freact-script-editor%22%20target%3D%22_blank%22%20rel%3D%22noopener%20noreferrer%22%3Ereact-script-editor%3C%2FA%3E%3C%2FLI%3E%3CLI%3E%3CA%20href%3D%22https%3A%2F%2Fspjsblog.com%2Fmodern-cewp%2F%22%20target%3D%22_blank%22%20rel%3D%22nofollow%20noopener%20noreferrer%22%3EModern%20CEWP%20by%20SPJS%3C%2FA%3E%3C%2FLI%3E%3C%2FOL%3E%3CP%3EAlso%2C%20check%20my%20answers%20given%20in%20below%20links%20about%20how%20to%20use%20these%20web%20parts%3A%3C%2FP%3E%3COL%3E%3CLI%3E%3CA%20title%3D%22SharePoint%20Online%20and%20adding%20an%20interactive%20page%20(Javascript)%22%20href%3D%22https%3A%2F%2Fsharepoint.stackexchange.com%2Fquestions%2F287858%2Fsharepoint-online-and-adding-an-interactive-page-javascript%2F287859%23287859%22%20target%3D%22_self%22%20rel%3D%22nofollow%20noopener%20noreferrer%22%3ESharePoint%20Online%20and%20adding%20an%20interactive%20page%20(Javascript)%3C%2FA%3E%26nbsp%3B%3C%2FLI%3E%3CLI%3E%3CA%20title%3D%22Current%20user%20context%20in%20SharePoint%20modern%20page%22%20href%3D%22https%3A%2F%2Fsharepoint.stackexchange.com%2Fquestions%2F293866%2Fcurrent-user-context-in-sharepoint-modern-page%2F293867%23293867%22%20target%3D%22_blank%22%20rel%3D%22noopener%20nofollow%20noreferrer%22%3ECurrent%20user%20context%20in%20SharePoint%20modern%20page%3C%2FA%3E%26nbsp%3B%3C%2FLI%3E%3C%2FOL%3E%3CHR%20%2F%3E%3CP%3EPlease%20click%20%3CSTRONG%3EMark%20as%20Best%20Response%3C%2FSTRONG%3E%20%26amp%3B%20%3CSTRONG%3ELike%3C%2FSTRONG%3E%20if%20my%20post%20helped%20you%20to%20solve%20your%20issue.%20This%20will%20help%20others%20to%20find%20the%20correct%20solution%20easily.%20It%20also%20closes%20the%20item.%20If%20the%20post%20was%20useful%20in%20other%20ways%2C%20please%20consider%20giving%20it%20%3CSTRONG%3ELike%3C%2FSTRONG%3E.%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-2487926%22%20slang%3D%22en-US%22%3ERe%3A%20Insert%20script%20in%20the%20header%20of%20the%20Modern%20page-%20SharePoint%20Online%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-2487926%22%20slang%3D%22en-US%22%3EHello%2C%3CBR%20%2F%3E%3CBR%20%2F%3EI%20would%20recommend%20creating%20a%20SPFx%20Extension%20webpart.%3CBR%20%2F%3E%3CBR%20%2F%3EYours%20sincerely%2C%3CBR%20%2F%3EAref%20Halmstrand%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-2502249%22%20slang%3D%22en-US%22%3ERe%3A%20Insert%20script%20in%20the%20header%20of%20the%20Modern%20page-%20SharePoint%20Online%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-2502249%22%20slang%3D%22en-US%22%3EThanks%20Ganesh%2C%20I%20will%20try%20this%20out.%20Question%20is%20can%20I%20add%20the%20script%20tag%20to%20a%20modern%20page%20header%20%3F%3CBR%20%2F%3EThanks%3CBR%20%2F%3EPbala%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-2502361%22%20slang%3D%22en-US%22%3ERe%3A%20Insert%20script%20in%20the%20header%20of%20the%20Modern%20page-%20SharePoint%20Online%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-2502361%22%20slang%3D%22en-US%22%3ENot%20out-of-the-box.%3C%2FLINGO-BODY%3E
Occasional Contributor

Hi,

 We are redesigning our intranet and upgrading to the Modern SharePoint site. One of the requirements is to insert a script in the header and div tag on the homepage.  How do I go about setting this ? The script and HTML tag are only loaded on the homepage, we don't plan to use them on other pages. It is a social feed from Curalate (Approved Instagram images).

 

Any help is appreciated. 

Thanks

5 Replies
best response confirmed by Pbala (Occasional Contributor)
Solution

@Pbala If you want to a insert script only on single modern site page, you can use Modern script editor web part developed by community members.

 

Check below links for script editor web parts (developed using SPFx):

  1. react-script-editor
  2. Modern CEWP by SPJS

Also, check my answers given in below links about how to use these web parts:

  1. SharePoint Online and adding an interactive page (Javascript) 
  2. Current user context in SharePoint modern page 

Please click Mark as Best Response & Like if my post helped you to solve your issue. This will help others to find the correct solution easily. It also closes the item. If the post was useful in other ways, please consider giving it Like.

Hello,

I would recommend creating a SPFx Extension webpart.

Yours sincerely,
Aref Halmstrand
Thanks Ganesh, I will try this out. Question is can I add the script tag to a modern page header ?
Thanks
Pbala
The extension can show up as a header.

Yours sincerely,
Aref Halmstrand