■

Table of Contents

• General
• Logo
• Favicons
• Font
• Alerts
• Header/Footer
• Apps launcher

Check out the attached PDF for a few examples of branding ideas created by Simpplr's Marketing team! these give you a great idea of what exactly is possible for your branding within Simpplr!

Simpplr's Brand Editor allows you to change the visual appearance of your intranet to reflect your company branding. Go to Manage > Manage application > Branding to edit your app's branding. 

For a quick summary of brand editor functionality, check out this video:

General

Changing the color under Primary color will change the icon and highlight color. 

You can also change the background color and add a background image. Once you change the color, you'll see a preview of the change right away. You can choose how the image is positioned on the screen, whether it is tiled and whether it's fixed. Note the background image cannot exceed 500KB. Resize your image before uploading it if needed. We recommend setting the width to 2000px and height no larger than 650px.

Click Save & close to keep your changes. Click Reset to change the color back to default. Click Reset all to reset all settings back to the Simpplr default.

Logo

Click Add logo to change the logo. The logo file should be PNG or JPEG. The recommended logo size is 540 (width) x 144 (height) px. Simpplr will automatically resize the logo to the maximum height of 40px. 

Favicons

A favicon is the icon you see in the browser tab/window or if you create a shortcut to the application on your mobile phone/tablet.

This is where you set the favicons used by the application. To do so we need to first create the favicon icon:

Create your favicon:

Navigate to a new web tab, but keep Simpplr open. You'll now need to create your favicon.

The image should be at least 260x260 px size logo/icon, but preferably in PNG format and of 500x500 px size. We recommend using this site:

http://realfavicongenerator.net/. Instructions are provided below for creating a favicon using this website.

1. From the site, select the file by clicking on the button shown below:

    

   
   
2. Once the image is uploaded, you're taken to the settings page. On this page, there are four sections. The first one is related to iOS. No need to change anything here.
   
   
   

   Note:

   You can scroll past the ad shown after this section. 
3. The second section is for Android settings. Here we recommend you keep your settings as below. If you plan to brand Simpplr, do remember to change the App name to your preferred name.
   
4. The next section is related to the Windows Tile. Select the most appropriate color based on your logo color. It is recommended to use one from the color tabs, but you can also type in your brand's custom color.
   
5. Then there's the macOS Safari options. This section will determine how the favicon will appear on macOS tabs.
   
6. Next, set up the path for these favicons. Set this up to /resource/Simpplr_FaviconAssets or whatever you'd like to name it. You can choose any name you'd like instead of Simpplr_FaviconAssets, but do not change the first part of the path /resource/. This name will need to be consistent everywhere we use it. More on this below.

7. Ensure you choose the option I cannot or I do not want to place favicon files at the root of my web site. Instead I will place them here: This is where you'll place your path; /resource/Simpplr_FaviconAssets.

   

8. Click Generate your Favicons and HTML code. From the next page, click Favicon package to save it to a location on your desktop/laptop.
   

Upload your favicon to Salesforce

1. Log in to your Salesforce instance by removing everything after .com in your Simpplr url and hitting the Enter key.
2. Click Setup. In the Quick Find box, type static resources and select. Click New and upload the favicon file you just generated. You will only need one file form the .zip package you just created. Use the 32x32px icon that was included in the .zip package. Name the file Simpplr_FaviconAssets, or whatever you named it above when creating the favicon path. Optionally, give a description, then set the Cache control to Public. Click Save.
3. Once you have the favicon uploaded, click view file to open the file in a new tab. In the url, highlight and copy everything from /resource/ onward.
   
4. Head back to your Branding editor in Simpplr, and in the Logo > Favicon field, paste the path you just copied. Then click Save & close.
   

Upload a new logo/favicon in a different segment

To upload a different logo or favicon to a segment within your intranet, follow the same steps as above using realfavicongenerator.net and upload the .zip package to Salesforce as a new static resource. Then:

1. In Simpplr, go to your user profile image and click Launch segment bar. Choose which segment you want to add a new image to, then go to Branding at the top navigation bar. From the brand editor, click Logo and insert the new Logo image or Favicon Path. Click Save.
   

Use the same logo/favicon in a different segment

Using the same image across different segments is as easy as adding the same image or path into the segment you want it for. For favicons, once you've uploaded the favicon package into Salesforce, remember the path you created. Then just paste that path into the proper segment. 

For example, the resource path /resource/Simpplr_FaviconAssets created above leads to a file source for the Simpplr logo. That resource path is going to be pasted into each branding editor per segment. 

Update a favicon

To update a favicon for your segment/intranet, follow the same steps as above, including the instructions from realfavicongenerator.net. You'll want to create a new resource path as well. Best practice is to upload the new files for the favicon to Simpplr, rather than replacing the old file. 

Font

You can select the default font (Roboto) or upload your org's custom font.

If you use a custom font, you'll need to zip the font files you want to use and upload the zipped folder to Salesforce as a Static Resource. Your org most likely has a certain font ready to use, and it may be hosted on a dedicated server like AWS. That's fine to use. Simpplr just needs the individual .ttf, .woff (or whatever applicable file type) files for the font you're going to use.

For our example, we'll download a font from Google Fonts.

1. In Google Fonts, we want to use the Cairo font. We'll select the Regular, Semi-bold and Bold options. Once you've selected each format you want, navigate to the right-hand pane and click Download all. This will zip the font for you. 
   
2. Open the .zip file you just created. It should look similar to this...
   
3. Open the static folder to get just the .ttf (or whichever font file you're using) files. The .txt files and everything else can be ignored. We won't be using them. 
4. Highlight all the .ttf files and right click. Choose Compress to zip the files. A new .zip folder will be created.
   
5. Rename the new .zip folder 'SimpplrFont.zip'. Save the folder in a location you'll easily remember, preferably your Desktop or Documents.

To add your zipped folder to Salesforce:

1. Go to Salesforce and click Setup. In the Quick find box, type Static and choose Static Resources.
   
2. Click New in the middle of the page. From the next screen, upload your .zip file containing your custom font. Assign the file a name and set the cache control to Public. Once finished, click Save.
   

Now we need to create a CSS file like the sample below. Feel free to copy and paste the code you see here into a text editor to make it easier for you. 

The font-family needs to be labelled SimpplrFont, which tells Simpplr to use this designated font from Salesforce. In each line where you currently see a .ttf file location shown, replace that file name with the font files in your zip folder. For example, the CSS shown here contains the applicable file locations on our computer for the Cairo font we downloaded. 

If your file type is .woff, you'll replace the .ttf portion shown below, as well as format('truetype') to format('woff').

# Custom Font
@font-face {
    font-family: 'SimpplrFont';
    src: url('/resource/SimpplrFont/Cairo-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'SimpplrFont';
    src: url('/resource/SimpplrFont/Cairo-Bold.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
}

Copy and paste the finished CSS code into the custom font text area of the branding editor. Click Save & close to start using the new fonts. Note that you cannot use a custom font selectively. The entire app will be using the custom font.

Alerts

You can update the color settings for the background text and icon colors for Alerts.

Header

You can select the header color by choosing either the default color, preset primary color, preset dark color, or custom color. If you choose a custom color, you can choose the color for the header background, the text color, the icon color, and the notification bubble color.

Footer

You can select the footer color by choosing either the default color, preset primary color, preset dark color, or custom color. If you choose a custom color, you can choose the color for the footer background and the text color.

Apps launcher

You can add your organization's most commonly used apps as links directly in Simpplr. From your Apps launcher,  your team can navigate to applications used outside Simpplr with just one click. To learn how to add apps to the Apps launcher, click here.

We've provided links to some of the most common company logos/icons used by our customers in the Apps launcher. Feel free to download the images and upload them to your hosting server. These images are in the optimal size to work on the Apps launcher, so you won't need to edit them before placing them on your hosting server. The instructions in the article linked above will provide you more information for uploading images.

• ADP
• Atlassian
• Basecamp
• Box
• Cerner
• Confluence
• Dropbox
• Expensify
• Greenhouse
• Jira Software
• Lattice
• LinkedIn
• Salesforce
• SAP
• SAP Concur
• Sequoia One
• Servicenow
• Slack
• Smartsheet
• Trello
• UKG
• Welltok
• Workday
• Zendesk
• Zoominfo