This content explains how to use the Script Editor web part in classic SharePoint Online (2013, 2016, 2019) to inject custom HTML and JavaScript into pages, and how to enable this functionality if it's not visible.
Mind Map
Click to expand
Click to explore the full interactive mind map • Zoom, pan, and navigate
hello and welcome to another point a
youtube channel i am bj a microsoft MVP
and in this video i am going to explain
how we can use script editor webpart in
SharePoint Online 2013 2016 or 2019 as
well so we'll see first we will create a
web part page and then we'll see how we
can add this script editor a part in the
sharepoint online chats or serpent same
way you can add it to sharepoint 2016 or
2019 sets remember we'll be able to add
only into the SharePoint classic sites
in the modern Church will not be able to
add any script editor web part we cannot
do any kind of script injecting by using
script or content editor web part so
first of all what is this script editor
web part in before to SharePoint 2013
and SharePoint 2010 and there were since
there was a content editor of a part
which we can use to inject script into
the page either you can refer it through
an external file which you can upload to
site asset or somewhere and then you can
upload into that you can give the
reference in the content editor of a
part but then in SharePoint 2013 script
editor Microsoft introduced script
editor where you can inject your where
you can put your HTML and your scripts
in that page in that paper to the script
editor web part and then finally you can
add that in that page so first what
we'll do is I'll open my SharePoint site
and then I will add I will create a web
part page so you can see here this is my
home page I will go to view all pages in
the vol pages I'll are a web part there
so if you'll see I'll create file then
new and then this is the web part page
so click on that then we will be able to
also a part base there so first what I
will do is I will I'll add I'll give you
a name for that suppose I will say
scraped editor demo and I will choose
this header footer and three column
layout you can choose the there are
different layouts are there you can
choose but I will choose this header
footer and
a column layout and then where we want
to store we want to store this on site
pages will store it and then click on
create so once you click on create it
will create a webpart page so in that
way part page you will see how we can
add the script editor apart so this is
the page which you have created it is
opening on the edit mode click on this
add a webpart link on any of the web
pads own you can add it I am just adding
in the hero Joe so once you add once you
click on that so it will open your pad
categories so you can see here this is
our purgatory categories under median
content you can see script editor is
there so click on add and now your
script editor web part will be added to
this header zone so now you'll see here
this is your script editor a path added
and without going to that properties you
can just click on edit snippet and it
will come up with a screen where you'll
be able to add your will be able to add
your HTML and your script code as well
so as I said you know we can write your
HTML tag also suppose I'll write on HTML
tag which will start with you h2 tag so
I'll put that in turn and then here I'll
write let's say script editor web part
demo and after that what I'll do is I'll
just take a button and I'll click up
that button we will try to display our
alert box on that so if you'll see here
this is whatever the HTML things will be
there it will you can you'll be able to
see it here now I'll take a button show
I'll take that button and I'll say on
click and in that one click I'll call a
function so I'll called suppose this is
my function and I will do the close
bracket and I'll have this tag I will
put the end button tag and will give a
text message here suppose I'll say click here
here
so now you'll see here the this the
button is appearing over here in this
page you can see it now we will write
our function which is your my function
this is our function name so I'll write
in in charge script X I'll put a script
tag first of all and I'll in the script
tag within that I'll I'll declare my
function so I will say function and then
this is your my function I will put this
this brackets and then I will put an
alert here so alert I will put a message
suppose you clicked on the button so
this is our code so we can semicolon
then in short this I will click on in
short and then it will save that so now
I'll stop editing the page so you can
see here this is your page and I will
click on that and you can see here it is
displaying the message so this way you
will be able to our script injured
script into that lot of time what
happened is if you do not see this
script editor webpart in the Edit Page
so when you'll add your part if you do
not see that then you just go to your
admin Center serpent admin Center and in
that air main shelter we need to enable
that you know custom script which we are
adding there we need to enable that so
let me just open myself point arm in
center you can also directly access your
tenant name - admin URL and then if
you'll see here there will be a settings
is there in the left side you can see in
the left side in the settings if you go
down you will see a custom script over there
there
so if will come down you can see this
custom scripts and some section so you
can make allow easier to run the script
so both the things you can do that both
the things and once it is done then
it will take if it is by default it will
be in prevent prevent will be selected
so you allow both the things and click
on ok sometimes you take up to 24 hours
to reflect that but usually you will get
it in 3-4 hours and there were other web
parts will be available on that so you
know hopefully you learned something on
this script editor of a part which you
can use in the same way you can use in
SharePoint 2013 2016 and 2019 as well
but you can use on the classic sir punch
it's not your modern SharePoint site so
if you really like your videos subscribe
to our youtube channel and you will get
a lot of updates or a lot of video
tutorials on various serpent literate
Click on any text or timestamp to jump to that moment in the video
Share:
Most transcripts ready in under 5 seconds
One-Click Copy125+ LanguagesSearch ContentJump to Timestamps
Paste YouTube URL
Enter any YouTube video link to get the full transcript
Transcript Extraction Form
Most transcripts ready in under 5 seconds
Get Our Chrome Extension
Get transcripts instantly without leaving YouTube. Install our Chrome extension for one-click access to any video's transcript directly on the watch page.
