Adding custom scripts

This page applies to Apigeeand Apigee hybrid.

View Apigee Edge documentation.

To add custom JavaScript code or HTML content before the <body> tag on each page in your portal:

Cloud Console UI

In the Apigee in Cloud console, go to the Distribution > Portalspage.

Go to Portals
Click Settingsin the navigation menu.
In the Custom Scriptssection, enter the custom JavaScript code in the text box. You can include multiple scripts.
Warning : Make sure to enclose your custom code in <script> and </script> tags. Invalid JavaScript code has the potential to impact the correct display of content or introduce security vulnerabilities across your entire site.
Click Save.

Classic UI

Select Publish > Portalsand select your portal.
Click Settingson the landing page. Alternatively, you can select Settingsin the drop-down in the top navigation bar.
Click the Custom Scriptstab.
In the Custom Scriptssection, enter the custom JavaScript code in the text box. You can include multiple scripts.
Warning : Make sure to enclose your custom code in <script> and </script> tags. Invalid JavaScript code has the potential to impact the correct display of content or introduce security vulnerabilities across your entire site.
Click Save.

The following sections provide examples of custom scripts:

Executing a custom script during and onLoad or onUnload JavaScript event
Adding a cookie consent popup

Executing a custom script during an onLoad or onUnload JavaScript event

Define custom scripts to be executed when each page in your portal:

Loads into the DOM using the onLoad JavaScript event.
Is navigated away from using the onUnload JavaScript event.

Your custom function must be defined as part of the portal.pageEventListeners in the global namespace (declared on the window variable).

Both the onLoad and onUnload events receive as their first parameters the current path of the page ( /quickstart , for example). The onUnload function receives as its second parameter the return value from the onLoad call enabling context to be passed between the two events. Use onUnload to clean up the event listeners that are no longer required and perform other clean up activities.

For example:

 < script 
> window 
 . 
 portal 
  
 = 
  
 {}; 
 window 
 . 
 portal 
 . 
 pageEventListeners 
  
 = 
  
 { 
 onLoad 
 : 
  
 ( 
 path 
 ) 
  
 = 
>  
 { 
     
 if 
  
 ( 
 path 
  
 === 
  
 '/quickstart' 
 ) 
  
 { 
       
 // 
  
 Change 
  
 text 
  
 content 
  
 of 
  
 first 
  
< p 
>  
 element 
  
 to 
  
 something 
       
 // 
  
 else 
 . 
  
 ( 
 DOM 
  
 must 
  
 be 
  
 loaded 
  
 when 
  
 onLoad 
  
 is 
  
 called 
 ) 
       
 document 
 . 
 getElementsByTagName 
 ( 
 'p' 
 )[ 
 0 
 ] 
 . 
 textContent 
  
 = 
           
 'Welcome to the quick start! Be sure to send us your feedback.' 
 ; 
       
 // 
  
 print 
  
 a 
  
 custom 
  
 message 
  
 to 
  
 the 
  
 console 
  
 every 
  
 second 
  
 while 
  
 user 
  
 is 
  
 on 
       
 // 
  
 quickstart 
  
 page 
 . 
       
 const 
  
 interval 
  
 = 
           
 window 
 . 
 setInterval 
 (() 
  
 = 
>  
 console 
 . 
 log 
 ( 
 'Hello' 
 ), 
  
 1000 
 ); 
       
 return 
  
 interval 
 ; 
     
 } 
     
 return 
  
 undefined 
 ; 
 }, 
 onUnload 
 : 
  
 ( 
 path 
 , 
  
 contextReturnedFromOnLoad 
 ) 
  
 = 
>  
 { 
     
 if 
  
 ( 
 contextReturnedFromOnLoad 
  
 != 
  
 null 
 ) 
  
 { 
       
 // 
  
 Stop 
  
 printing 
  
 custom 
  
 message 
  
 to 
  
 console 
  
 every 
  
 second 
 . 
       
 window 
 . 
 clearInterval 
 ( 
 contextReturnedFromOnLoad 
 ) 
     
 } 
 }, 
 }; 
< / 
 script 
>

Adding a cookie consent popup

Custom scripts may be used to implement a cookie consent solution. There are a number of popular open source options implemented in JavaScript; select one that meets your specific compliance requirements.

For example, the following script uses the Cookie Info Script .

 < script 
  
 type 
 = 
 "text/javascript" 
  
 id 
 = 
 "cookieinfo" 
  
 src 
 = 
 "//cookieinfoscript.com/js/cookieinfo.min.js" 
>
< / 
 script 
>