■

Here we'll cover the step-by-step instructions for customizing your Salesforce/Simpplr login screen. 

Prepare

How to set up your login screen

Set up a static image for the right side of the login screen

Set up a dynamic image for the right side of the login screen

Prepare

Back to top

You'll need the following components before customizing your company's login screen:

1. Colors - Gather the Hex codes for any colors you want to use.
2. Logo - Gather the logo you want for above the login fields. Note max dimensions for this must be 250x125px and up to 100kb.
3. Right side image - This will be the image shown on the right side of the login screen. If you're hosting the image on a url, record the url for the image.

We recommend matching your company's branding on Simpplr for the custom login screen.

How to set up your login screen

Back to top

1. Log in to your Salesforce org.
2. From Setup, type My Domain into the Quick Find box. Click My Domain.
   
3. Scroll down until you reach Authentication Configuration and click Edit.
4. From here you can update your login screen settings, including your logo file (must not exceed 250x125px), background color, and right frame url if you're hosting it on a web page.
   
5. Once finished, click Save and sign out to be redirected to the login screen and see your results.

Set up a static image for the right side of your login screen

Back to top

1. Navigate to your Salesforce instance and set it to Classic mode if not already there.
   

2. Click the plus (+) icon, then scroll down until you see Documents and click.
   
3. From the Documents menu, click New. Then complete the required fields to name your document. Ensure you have Externally Available Image selected before saving. Load your image from your computer, or enter the url of the hosting location if the image is on a web page. Once complete, click Save.
   
4. Your image will now appear in the Recent Documents list on the previous screen. Click the image name to open it.
5. Right click the image and select Open Image in New Tab. Shift to the image tab url. Copy the url from your browser and select Copy Image Address.
   
6. Go back to your Salesforce interface tab and click Setup. From the Quick Find box, search My Domain and click My Domain.
7. Scroll down to Authentication Configuration and click Edit. 
8. Paste the image url you just copied into the Right Frame URL box and click Save.
   

Set up a dynamic image for the right side of the login screen

Back to top

For this, we’ll need to have an image picked out to use for the right-side frame. Provide that
image to your web developer and have them host it somewhere, preferably unlisted, but publicly
available. Your developer will provide you with the url to use.

To insert your dynamic image, repeat steps 6-8 of the previous section, Set up a static image..., except this time, use the url provided to you by your developer.

The following guide from GitHub will help you with sample HTML codes if needed:

Sample HTML codes from Github