Skip to content

Adding customers Logos to the Web client

It is possible to add customer logos to the CRM. This could be used in many creative ways in future. However today, the logo will only be displayed in the Dock (main navigation bar), as the icon of the first navigation item (Start).

This little branding touch could be very useful to conduct more impressive sales processes. It can also provide customers with a tool that looks and feels like their own corporate tool.

Guidelines for choosing the best logos

Supported image formats

Basically any image formats that the web browsers can show can be used. For instance .jpg, .bmp, .png, .ico, .svg, .gif can all be used.

Preferred image formats

Our top recommendation is using .svg. The reason is that SVG files are normally very light-wight and can scale well in any size. They render sharply on retina or 4K screens and also have a transparent background, which allows them to smoothly blend in the rest of the UI.

Using SVGs would give us better options in the future, when we display the customer logo in other places in the user interface of the web client.

Tip

SVG files that are created by third-parties can be infected by malicious code (just like any JavaScript file). You can check its source code and see if you find any <script> tags in it in any project. Our code will trim and remove any script tags automatically, but it is always good to check for such tags. You will read about this more further down.

After .svg format, our next choice would be the .png files. PNGs are also reasonably small in file size, and their transparent backgrounds makes them a great choice for this usage. However, if they are too small, it could mean they have a low resolution which makes them render poorly in the UI.

Tip

On the Dock, the home icon will be rendered in a 28px × 28px square. This means to get a crisp rendering quality, you would need a PNG file with the canvas size which is twice as big (56px × 56px). So if you only want to use this icon on the Dock, that'd be a minimum requirement. Yes, it's possible to use this icon on other places. You will read more about this at the end of this guide, but this also suggests that a SVG file is a better choice.

Aspect ratio and visual details

  1. Make sure to use an image that is in a square frame, with the aspect ration of 1:1. This makes it render better as an icon in the Dock.
  2. Also make sure that the visual motif inside the picture (the logo) has no empty space around it and fills the entire document. Paddings around the logo make it look smaller than other icons in the Dock, and also negatively affects the design when we enable use of the logos in other places within the user interface. In this picture ☝️ you can see how paddings around the logo will make it render too small in the dock.
  3. Make sure to have transparent background, below the logo itself.

Avoid using animated files

PNG, GIF and SVG files can have animated formats. But for this usage, we strongly recommend you not to use animated files in the UI. It will be extremely annoying for the users to see a logo that constantly moves.

Go to Lime CRM Admin ➡ System ➡ Branding.

In this view, you will see an input box called "Logo". This is where you can add the image file for the logo. For that, you have two options:

  1. Using an external URL to an image file
  2. Writing the SVG code of the logo, directly in the box

1. Using an external URL to an image file

This is a straightforward way to add a link to an external image file. So every time the Web client is loaded, this file will also be fetched from the external location and displayed.

This is a good choice if you want to rely on the resources that the customer already has on their website. For example, using the Favicon of the customer's website (if they have a high resolution one of course) might be a great and easy choice. Favicons are already small in file size, have the right format, and display the logo in a square-shaped frame without any space around the visual motif. This makes them a perfect choice.

Important

But before picking this strategy, you need to be able to answer "Yes" to the following questions:

  • Will this file be always accessible from the same URL? Well, if you think that there is a risk that the externally hosted filename or its URL can change, it is naturally not a good idea to use it.
  • Is the file-size small enough? In theory, you can add a URL to a file which is too large. This will slow down the loading of the CRM.
  • The customer is not an on-prem customer, right? On-prem customers run the CRM in an isolated environment. This means some setups may have no access to the internet when the web-client is running. So relying an externally hosted file is not a good choice, as it cannot be displayed.

The correct syntax of the URL

Just make sure to enter a valid URL of the image file, like this one https://···.svg

For example, this will display Lime Element's logo, instead of the default CRM logo: https://lundalogik.github.io/lime-elements/versions/next/favicon.svg

The second alternative that we absolutely recommend is writing the SVG code of the logo, directly in the input box. This is good because:

  • The data will be saved in the database, and therefore will work well for on-prem customers.
  • It will be more performant, and
  • the rendering quality will be better as explained earlier.

However, it could be slightly trickier to get the SVG code. So simply follow these guidelines.

2.1. Find or create a SVG version of the logo

Read the guidelines above, regarding aspect ratio and visual details before choosing the right SVG file or creating it using a vector design program such as Adobe Illustrator or similar.

2.2. Clean up and minify the SVG file

There are tools out there that help you minify the SVG code. We recommend SVGOMG. They help you get rid of all the meta-data, line-breaks, comments, and unnecessary code that we shouldn't have in the SVG file.

2.3. Paste the SVG code in with this syntax, in Lime Admin Open the SVG file, using a code editor program, and copy its source code. In the input box in Lime Admin, you have to enter svg code. For example, this will display Pepsi's logo, instead of the default CRM logo:

<svg width='100%' height='100%' viewBox='0 0 32 33' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' xml:space='preserve' xmlns:serif='http://www.serif.com/' style='fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;'><g transform='matrix(0.0532218,0,0,0.0530644,3.07091,3.33257)'><circle cx='242.929' cy='248.14' r='225.472' style='fill:white;'/></g><g transform='matrix(0.0503054,0,0,0.0501566,3.12182,3.65988)'><path d='M456.158,125.852C460.99,141.579 463.498,158.208 463.498,175.431C463.498,230.909 436.295,279.681 394.957,310.339C322.9,363.513 217.914,363.602 73.024,409.356C116.688,461.9 182.397,495.251 255.943,495.251C387.709,495.251 494.543,388.185 494.543,256.062C494.543,208.09 480.383,163.38 456.158,125.852Z' style='fill:rgb(59,78,196);fill-rule:nonzero;'/></g><g transform='matrix(0.0503054,0,0,0.0501566,3.12182,3.65988)'><path d='M255.943,16.75C124.173,16.75 17.457,123.872 17.457,256.089C17.457,309.081 32.045,339.377 56.261,378.075C219.076,333.693 351.146,224.926 399.072,64.542C359.229,34.543 309.658,16.75 255.943,16.75Z' style='fill:rgb(229,51,51);fill-rule:nonzero;'/></g></svg>

What if the URL or the SVG code is invalid?

Well, nothing super horrible will happen (depending on your definition of "horrible"). The end user will just not see any icon in the dock. The item will be rendered completely blank.

How does this work? Can I use this feature more creatively?

We are basically formatting and printing the URL, or SVG code that you provide, as a CSS variable on one of the main container elements in the DOM. If you paste a SVG code, our scripts will clean it up, remove line breaks, convert all HEX color codes to their equivalent RGB codes, remove any <script> tags, and print the cleaned-up version of the SVG code in the DOM.

So somewhere in the HTML code of the web client, there will be a style tag which contains a variable like this: style="--crm-custom-home-icon: {a formatted version of what you have put in Lime Admin};

Then we use this, through some other CSS magic in the dock, to display the newly added logo on top of the default CRM logo and cover it.

Since the CSS variables of --crm-custom-home-icon and its specified value are accessible by other components across the UI, they can be used for instance as background-image of another element in your custom components too, like this: (background-image: var(--crm-custom-home-icon);).

Note

Currently, the modals do not have access to this CSS variable. Only components that are rendered inside <limec-application /> have access to it. This could be different in future versions of the web client.