Managing your Branding | SideDrawer

This article is for: SideDrawer Console users

In your SideDrawer Console, you can control the appearance of your SideDrawer environment, so that your clients experience SideDrawer with your branding and design.

Some helpful terms:

Tenant	Your SideDrawer environment - your Console controls this tenant, with its unique URL
Tenant Owner	Usually the business owner - the Tenant Owner has admin access, and is linked to the credit card on file
Tenant Manager	Admin user with Console access for the entire tenant
Brand Manager	Admin user with Console access for one Brand within the tenant
Affiliate	Optional subsidiary of your tenant - if you have multiple brands within your organization, you can set up different branding and settings for each one in SideDrawer, all within the same tenant account
Brand Code	The system identifier for each affiliate - when creating resources like Info Requests, Content Packages, or Custom SideDrawer Templates, you'll select a brand code for each one, to link it to the right affiliate

From Console, you can:

Configure Look & Feel for your environment and subsidiaries
Edit the Brand Name for your environment or subsidiaries
Edit the vCard with contact details
Upload image files to your Asset Library for use in branding

You can also edit the UX Settings for your environment - these are described in their own article

Learn more about UX Settings

Note that branding changes will reflect in the client-facing front-end app, not in your Console!
To view changes in the front end, click on Go to App in your left-hand menu - this will open a new tab where you can see the front end app.
Remember to refresh your browser in the front end tab each time you make a change in the Console!

Manage Look & Feel

Add brand logos, select colours, and determine fonts for your SideDrawer environment.

In your Console, go to Settings -> Affiliates, and choose the Affiliate (environment or subsidiary) that you want to configure.

Click on the 3 dots to the right of the Affiliate name, and select Manage Look & Feel from the Actions menu.

This will open the Brand Set Up page, where you can configure brand logos, colours, and fonts for your SideDrawer environment

Main Logo	Logo that appears in the top left corner of your clients' SideDrawer screen
Brand Logo	[No longer used - you can leave this blank]
Reverse Logo	[Optional] the version of your logo that will appear on mobile devices set to 'Dark Mode'
Reverse Brand Logo	[No longer used - you can leave this blank]
Email Header Banner	This banner displays at the top of any email communications from your SideDrawer environment, including invitations and activity notifications. For best results, use an image that is 500 pixels (width) x 100 pixels (height)
Primary Color	The main colour of your SideDrawer environment, used for the login screen background, most buttons, and the icons in the Tiles
Accent Color	Secondary colour, used for text and menu icons
Font	The font used in the SideDrawer platform and in emails from your environment

Selecting a Logo or Image

You have 3 options when selecting a logo or image:

Choose a local file
Click in the central square to open your file folders and select an image file that's saved in your drive.
Choose the image file, then click Open to upload it to your Console.

Note that this works best when the file is saved locally on your machine - if the file is in cloud storage like Sharepoint or Google Drive, you may need to download it to your computer first, then upload to Console.
Select an icon from the Gallery
If you don't have your own image file, you can search our Gallery for icon images.
Click on the the icon at the upper right to open the Gallery, then enter a term in the search bar.
Select the icon you want, then click Confirm.
Use an image file from your Asset Library
If you have brand images uploaded into your Console's Asset Library, you can access them by selecting the icon on the lower right.
Select the image that you want to use, then click Confirm.

Selecting a Colour

To choose your Primary or Accent Colour, click in the colour square to open the selection menu.

If you know the Hex Code for your brand colour, you can enter it or paste it in the Hex field.
You can also use the arrows to the right of Hex field to toggle the entry from Hex code to HSLA colour selection or RGBA colour selection:

Use the upper field to tweak your selection, choosing a more saturated or more gray-toned version of your colour.

The upper bar lets you choose a broad selection from the colour spectrum, for example, a general red or a simple blue, which you can then fine-tune.

The lower bar lets you switch from a solid colour to a checkered pattern:

Selecting a Font

Click the arrow at the right of the Font bar to bring up the fonts menu, then select your font from the drop-down:

We have limited the font selection, to ensure that text in the SideDrawer platform is clear and easy to read.
If you have a specific brand font that is not included here, you may need to find a best-fit as an alternative.

Preview & Save

As you make changes in this menu, adding logos, changing colours, selecting fonts, the Preview screens at the bottom of the page will show a mock-up of how your changes will look in the client-facing view.

Very Important:
Remember that all changes in the Look & Feel page are temporary until you click the Save button at the bottom right!

To see changes reflected in your environment, click Save, then switch over to the client-facing app, and refresh your web browser.

Edit Affiliate

Select Edit Affiliate to update the name of your core (tenant) affiliate, or any subsidiary brands.
The Affiliate name is internal, so this change is not client-facing, but will reflect in Console and be visible to your admin users.

Edit the Affiliate name, then click Update below to complete

Note that the custom URL for your tenant is determined when you create the tenant.
If you need to change the URL (for example, because of significant rebranding), contact us at [email protected], and our IT team can make the adjustment.

Edit vCard

The vCard is an optional element located at the top right of the client-facing app screen, displaying information and links to help clients contact you.
The vCard can include your name, a photo or logo image, and a variety of contact links, such as phone, email, calendar link, address, and social media accounts.

Adding vCard Details

Click on Update vCard details at the upper right to open the details screen.

In the details screen, you can:

Add a vCard image by selecting a file from your local drive, choosing an icon from our gallery, or uploading an image file from your Asset Library
For best results, use a square file image, where the height and width are the same number of pixels
Enter a Name for your vCard
Add a Title
Enter a Company name

Many of these items are optional - you need to at least enter a name, but you don't have to fill all the fields if they're not relevant to you

Adding Contact Links

Use this feature to add linked contact information that your clients can click on from the SideDrawer page.

First, click on Add Contact Link in the vCard screen:

For each Contact Link, you'll need to select:

Link Type - this is the kind of contact you're creating: phone, email, calendar, website, etc.
The link type tells our system what kind of information will be needed in the next fields.
Label - this is how the contact will display in the SideDrawer screen.
When you select the Link Type, the system will autofill these fields with generic information, to show you the format that's required (phone number, email address, website URL, etc.)
Link - this is the system information that works in the background to make the link work
For example, the Label might say "website," and the Link would be the actual URL

There are many different options available, but be aware that the space is limited, so you'll need to select your highest priority items to prevent the card from getting cluttered.

Asset Library

The Asset Library holds image files that you can use in setting up your branding, whether for the logos in the Look & Feel menu, the picture for your vCard, or logo images for Teams.

To upload an image file to your Asset Library, go to Settings -> Asset Library in your Console, then select Upload a new Image in the upper right

In the upload screen, select the Brand Code, to connect the the image to the right Affiliate.

Drag the file to the centre window, or click in the window to open your folders and select a file.

Once the file is selected, click Confirm to upload it.

The Asset Library menu will show you all files currently uploaded, including the File Name, Brand Code, a small Image Preview thumbnail, and the File Size.

If you ever need to remove a file, click the 3 dots to the right, then select Delete Image