Solved

Restyle agent/customer login


When styling the login page is it possible to change the order of and individually restyle the “Are you an agent?” and “Are you a customer?” login links?

Ideally we would have the prompt for customers to login be much more prominent and higher on the page than the agent login. It’s not very intuitively laid out as it is currently (why is there a headset icon next to the customer login and the agent login?!). Appreciate any pointers that anyone might have. Thanks!

icon

Best answer by hemanth.ramya 7 June 2021, 14:41

View original

10 replies

Userlevel 5
Badge +9

Hello everyone,

 

Appreciate you sharing your insights, @karlnharrison. :) 

With the new customer portal theme and UI we have in place today, the customization code snippets shared earlier might not work as expected. Please try the following as shared by Karl and let us know if this helps. 

 

I have solved this question about changing the text “Are you a customer?” with the help of a Freshdesk agent:

 

include the below script in the head section under Portals<Customize portal> Pages> Layout > Head:


<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

 

then navigate to Admin>Support Channels>Portals>Customize Portal>Layout & Pages>Portal Pages>Login Page 

add this script 

<script>

jQuery(document).ready(function(){

jQuery("p.fs-20.semi-bold.mt-16.text-center:contains(Are you a customer?)").text("Please use your blah blah to ").append('<a id="" href="yourloginurl" class="fw-twitter-btn py-12 rounded"> Login here</a>');

});

</script>

 

Feel free to drop a note for any further questions.

 

Cheers,

Badge +1

@hemanth.ramya I tried inserting the code to move the customer login up on the login page, and it didn’t work. Any tips? Thank you!

I have now added a fix for me and hopefully you. 

Badge +1

I have solved this question about changing the text “Are you a customer?” with the help of a Freshdesk agent:

 

include the below script in the head section under Portals<Customize portal> Pages> Layout > Head:


<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

 

then navigate to Admin>Support Channels>Portals>Customize Portal>Layout & Pages>Portal Pages>Login Page 

add this script 

<script>

jQuery(document).ready(function(){

jQuery("p.fs-20.semi-bold.mt-16.text-center:contains(Are you a customer?)").text("Please use your blah blah to ").append('<a id="" href="yourloginurl" class="fw-twitter-btn py-12 rounded"> Login here</a>');

});

</script>

I would also like to change the text associated with the Agent/Customer login. I tried the above code snippets and they did not work. I’d appreciate any other suggestions?

Userlevel 1
Badge +3

@hemanth.ramya I tried inserting the code to move the customer login up on the login page, and it didn’t work. Any tips? Thank you!

@colincooper I want to achieve the same as you!  Would you mind sharing how you have your portal login page configured?  My “customers” are internal users and only need SSO as a sign-on method.

Thanks

Is this customization still possible?  Just signed up for a Freshdesk trial and it ll looks great except for the end user portal login page.

 

I’ve tried adding the suggested code snippets to the login page (which I’ve published) but don’t see any change.

Userlevel 2

Hey @hemanth.ramya,

Thanks so much for the help, the script to move the customer login above the agent login worked great!

Is there a script that would allow me to alter the text strings in those links? Ultimately what I would like to do is something like the attached image. I should be able to handle the CSS styling – but I would need the ability to change the text strings for the “Login here” links individually. Thanks again for your help!

 

 

@colincooper These are the codes to changed the text of "Are you an agent - Login Here" or "Are you a customer - Login Here". Use the following code snippet on the same Login page under Admin > Portals > Customize portal > Layouts and page > Portal pages > Login page.

Agent Login:

<script>
jQuery(document).ready(function(){ //document.ready begins

jQuery('.agent-login-link span').text("Agents - ") // To Change Agent Login Text

}); // document.ready ends
</script>

Customer Login:

<script>
jQuery(document).ready(function(){ //document.ready begins

jQuery('.customer-login-link span').text("Client - ") // To Change Customer Login Text

}); // document.ready ends
</script>


Happy Freshdesking!

Aldrin,
Freshworks Community Team​​​

Hey @hemanth.ramya,

Thanks so much for the help, the script to move the customer login above the agent login worked great!

Is there a script that would allow me to alter the text strings in those links? Ultimately what I would like to do is something like the attached image. I should be able to handle the CSS styling – but I would need the ability to change the text strings for the “Login here” links individually. Thanks again for your help!

 

 

Userlevel 5
Badge +9

Hello @colincooper,

 

Yes, you can change the order in which the customer/agent login options are shown in the portal via Portal customization feature in Freshdesk. Kindly use the following code snippet under Admin > Portals > Customize portal > Layouts and page > Portal pages > Login page to achieve the same:

<script>
jQuery(document).ready(function(){ //document.ready begins
jQuery('.customer-login-link').clone().insertBefore('.agent-login-link')
jQuery('.customer-login-link')[1].remove()
}); // document.ready ends
</script>

 

In case you would like to hide the headset icons displayed next to the login options, you can make use of the code snippet in the login page section:

<script>
jQuery('.customer-login-icon').hide()
jQuery('.agent-login-icon').hide()
</script>

 

Outcome of the portal customization

 

Feel free to drop a note in case you need any further help. :)

 

Cheers,

Freshdesk Community Team

Reply