Step by step how to add HTML, CSS & JS to create an animated page.

RichardSaunders
Tera Guru

Inspired by some of the amazing pacman, space invaderJoin the Challenge - 404 Page Gallery from Service Portal Introduction trainingposts from the Service Portal training i wanted to create my "own" interactive animated page.

On a website called codepen.io it gives you all the elements to re-create some nice graphical animations, example below.

Would anyone with experience is this area be able to provide steps to integrate this in a Service Portal page?

Your sincerely

no/low coders

find_real_file.png

10 REPLIES 10

williammorton
Tera Contributor

Go to Service Portal Configuration > Widget Editor > Create a new widget > give your widget a name



Then check the tickboxes for HTML, CSS and Client Script. This will give you the three fields you need to insert your code.



find_real_file.png



After you have created your widget, you will need to put it on a page in order to use it, which you do by going to



Service Portal Configuration > Designer > Select or Create the relevant page > Click and drag Container > Click and drag Widget (you may have to search for your widget)



If you want to do this in a 404 page you will need to alter the page called 'Not Found'.


Hi William, i get this but i have tried copying the code into a new widget but it never renders. I'm not sure what i'm doing wrong.


Hi Richard,



Do you have any screenshots that you could show me?


Hi William, sorry for the delay.



For example this one https://codepen.io/akm2/pen/rHIsa



I create a new widget and test page, add the corresponding code from the above link. But all that shows is the HTML



find_real_file.png