Add custom script in <head> element for Modern pages in SharePoint Online
Vivek Kanse
![Vivek Kanse]()
Vivek Kanse
Office 365 | SharePoint | Microsoft Power Platform | Modern web development | .NET | Microsoft certified
Many of organisations moving their existing applications into Office 365 and SharePoint environment for Colloborations, DMS , Intranet sites, extranet sites and even Public facing sites as well.
?Client requirement :We have completed one Intranet web application which was developed into Office 365 - SharePoint.There was one requirement to add Chatbot service in this intranet portal.This Chatbot service was having some script which needs to add <head> element of the web application.
Steps to Implement the solution:
To inject the custom script in SharePoint Online for Modern pages we need to create SPFx extension. First we created the SPFx extension and then in main .ts file added following script :
private _externalJsUrl: string = "Your custom script URL(CDNPath)";
let scriptTag: HTMLScriptElement = document.createElement("script");
scriptTag.src = this._externalJsUrl;
scriptTag.type = "text/javascript";
document.getElementsByTagName("head")[0].appendChild(scriptTag);