how to ceate a contact us link on the homepage of the self service portal

Mina_Saidi

Hi,

I wish to create a contact us link on the self service portal that takes the user to a page we have on our intranet with numbers and contacts of sections.

I want to do this without having to create a RO if its possible. I have added a screenshot of our home page and where I have highlighted in yellow is where I want the link to the contact us page be. is it possible?

any help will be appreciated.

Thank you.

Shane_White

Hi @Mina_Saidi

It may not be the best example but this is something I have quickly built in my Lab to show you how this might work, of course you will need to decide the element or the class you prepend depending on where you want this to display.

$(document).ready(function () {

var mainPageNode = document.getElementById('main_wrapper');

var observer = new MutationObserver(function(mutations) {

var homepage = $('.row.search-row')

if (homepage.length > 0) { //An Element Exists

homepage.prepend('<a href="https://www.google.co.uk" style="background-color:#ffffa0;color:red;display:inline-block;padding:14px 25px">Contact Us</a>')

observer.disconnect();

}

});

// configure the observer and start the instance.

var observerConfig = {attributes: true, childList: true, subtree: true, characterData: true };

observer.observe(mainPageNode, observerConfig);

});

This is how it looks in my portal:


Let me know if this is okay.

Thanks,
Shane.

Mina_Saidi

thanks Shane, That is quite helpful. it looks good to me.

I will need to add this to the custom space for our home page?

Shane_White

Hi @Mina_Saidi

Yes you need to add this code to the Custom.js file in your Custom Space for the home page. Or use the Script Loader for better performance, info here: 
https://cireson.com/blog/how-to-organize-your-customspace-with-a-script-loader/

Thanks,
Shane

Kenneth_Andersen

Hi @Mina_Saidi
I really like your homepage on the portal - do you maybe want to share the custom.js file ?

Mina_Saidi

homepage.txt

Hi Kenneth, THank you. I have attached the file for our homepage. We  use getscript command in our custom.js file to load customisations. Hope this helps.

this was creaed for us by our vendor, he did a great job.

Kenneth_Andersen

Hi @Mina_Saidi

Thanks a lot, I will look in the this next week ;)

Mina_Saidi

Hi @Shane_White,

I loaded the code above into our custom space and used the below get script as well but the code doesnt load at all.

I'm happy for it to be on top for now until i figure out how to get it to appear on the bottom but it doesnt appear at all. any ideas?

FYI - im not that great with java and html.

// Load Customisations for Custom Contact Us

$.getScript("/CustomSpace/ContactUS/custom_Contactus.js");

Shane_White

Hi @Mina_Saidi

Since you already have quite a customised home page the class I used in my customisation might need to be different for you.

You can open the dev tools and inspect elements to see where you would like to put it then just substitiute the code in.

Thanks,

Shane,.........

Kenneth_Andersen

Hi @Mina_Saidi

I did load the script file, and found out that I also need the CustomSpace/AATSC/aatcatalog.css - that will save me from alot af work to get this to work :)

Can you provide me with this ?

Mina_Saidi

aatcatalog.txt

Hi Kenneth, attached is the file you are after. let me know if you need anything else.

Kenneth_Andersen

Thanks @Mina_Saidi That was all the I needed :)