Add an image to a login flow

Login flows allow you to run automation or display  messages after a user successfully logs in to Salesforce.

In this post, I'll show you how to add an image to a login flow in Salesforce using a URL in a screen flow. For this setup you'll need:

1. Login flow
2. Custom label
3. HTML/CSS knowledge

Let's get started.

Create a custom label

1. Go to Setup > Custom Labels
2. Click New
3. Enter a name for the label eg LoginFlow Image
4. Enter LoginFlow as the category
5. Enter the following HTML snippet then click Save 

<img src="URL OF THE FILE TO DISPLAY alt=“file description”>

Pro Tips

• Using a custom label allows for the image to be updated without changing the flow logic.
• Add CSS to style the image and any text you want to display.

Create a screen flow

1. Go to Setup
2. In setup search enter flow
3. Select Flows
4. Click New > Screen flow
5. Drag a screen element on to the canvas 
6. Enter a name and description for the screen
7. Add a text output component
8. In the formula editor select flow > label > label name created above
9. Click Save
10. Enter the flow name (eg System Admin Login Flow) and a description
11. Click Save
12. Debug the flow to ensure the file displays correctly
13. Activate the flow

Create a login flow

1. Go to Setup > Setup Search
2. Enter Login then select Login flows
3. Create a new login flow for the flow created above for the desired user profile 
4. Assign the flow to the system admin profile
5. Click Save

Alright, so we have our login flow ready to test. Log out of your salesforce instance then login again. You should see the login flow with an image displaying.

Additional Info

• IMPORTANT: Test your login flow works before assigning it to a system admin profile. If the flow fails, you won't be able to log in.
• Login flows are assigned to individual profiles. Create a new login flow for each profile. 
• You can the the same flow 
• Add text using additional custom labels on the screen in the flow. This allows you to change the text displayed in the login flow without changing the flow version and allows for translation of text into other languages.
• You can add CSS to your image HTML to ensure the image scales for different screen sizes.
• Check out https://www.w3schools.com/css/default.asp for more on CSS.

I hope you have found this post useful. Sound off in the comments with questions, comments or share how you’ve applied this in your Salesforce org. Thanks for reading and catch you next time.