Customer website customization and styling
Alter the themes and colors of your customer website, and iframe a login page onto another site.
We understand the importance of delivering a cohesive and visually appealing customer experience. That’s why we offer tools to customize and style your customer website, ensuring it aligns with your brand. Whether you want to adjust themes and colors or embed the login directly onto your website, we provide the options you need to fully integrate your customer website into your online presence.
Themes and colors
Creating a visually appealing customer website is straightforward with LoanPro’s customization options. You can select and modify themes and colors to match your brand. To access these settings, navigate to Settings > Website > Site Management > Themes & Colors in your company account. Select ‘Edit’ to change the theme and/or color scheme of your website. Currently, there are two available themes for the customer website. Use the radio buttons to choose your preferred theme.
In the color scheme selection area, you can set the main background color as well as the header, footer, buttons, and text colors. Enter hex color codes directly or use the color picker to select your preferred colors. If the color fields are left empty, the default colors will be used. Click ‘Save’ to apply your changes.
iframe a dedicated login page
In addition to customizing the website’s appearance, you can further integrate the website into your online presence by embedding the customer website login directly onto your website using an iFrame. This allows you to maintain the visual consistency of your website, while providing direct access to the website.
Build the iframe URL
The template iframe URL is: [in line] https://loanpro.simnang.com/client/public/iframe/customerLogin.html?domain=[Your Domain Identifier].loanpro.software&tenant=[Your Tenant ID]&logout=[URL Where User is Redirected Upon Logout]
To use this template, you will need the following information:
- Your domain identifier. This can be found by navigating to My Account > Company Profile > Company Contact Information. It is the value for the field labeled "Web Domain Name".
- Tenant ID. This numeric ID identifies your tenant. It can be viewed on the companies page or found in most emails sent to you from LoanPro.
- Logout URL. This should be formatted as https://www.google.com.
For example, if your domain identifier is ‘mycompany’, your tenant ID is 50000, and your logout URL was https://www.google.com, your iframe URL will be:
https://loanpro.simnang.com/client/public/iframe/customerLogin.html?domain=mycompany.loanpro.software&tenant=50000&logout=https://www.google.comOnce you have your iframe URL, you can embed it on your website using the following code:
<iframe src="https://loanpro.simnang.com/client/public/iframe/customerLogin.html?domain=mycompany.loanpro.software&tenant=50000&logout=https://www.google.com"></iframe>Page HTML
To ensure the login works smoothly across all browsers, include the following JavaScript on the same page as the iframe. Once the following HTML has been added to your page, your customers will be able to log in to the customer website from your website. The page will look like this:
<html>
<head>
<script type="text/javascript">
window.addEventListener("message", loginMessage, false);
function loginMessage(event)
{
if(event && event.data && event.data.redirectUrl)
{
window.location.href = event.data.redirectUrl;
}
};
</script>
</head>
<body>
<iframe src="https://loanpro.simnang.com/client/public/iframe/customerLogin.html?domain=mycompany.loanpro.software&tenant=50000&logout=https://www.google.com"
/>
</body>
</html>By leveraging LoanPro’s customization options and embedding capabilities, you can create a seamless and branded experience for your customers.
Was this article helpful?