Customize Digital Assistant's branding

Add your company logo to Digital Assistant

You can upload your company logo to the Digital Assistant header section. To do this please follow these steps:

Original logo

A. Upload the image file

From the Digital Assistant administration page navigate to Development → Manage Spaces and then open the following path: Global > Components > custom-theme.

In this folder please click Upload in the top right-hand corner and select the image file from your computer.

Staying in the Spaces Manager please now navigate to Spaces > Global > Views > adenin.GateKeeper > App and open logo.liquid.

Liquid logo file

Change the markup as follows:

<div id="logo-container" class="layout center horizontal">
<img src="/components/custom-theme/your-logo.png">

After you save the file, your Digital Assistant header will show the logo that you have uploaded.

New custom logo in Digital Assistant Header

Add bookmark icons

You may also want to configure bookmark icons so that your company logo appears in your users' browser tabs and bookmarks.

For most browsers, you will simply need your logo, or whichever icon you wish to display, in two sizes: 16x16 pixels and 32x32 pixels, both in .png format. Name these files favicon-16x16.png and favicon-32x32.png respectively.

Navigate to Development → Manage Spaces → Global → Components → custom-theme, select Create Folder, and name it app-icons.

Creating app-icons folder

Enter this folder, and upload both of your images.

If you want to support Safari's pinned-tab mask icons (supported only on the macOS version of Safari), you will need one more file. Follow Apple's documentation to create an .svg file that meets their requirements, name it safari-pinned-tab.svg, and upload the resulting file into the app-icons folder we just made.

Uploading images

We now need to create a custom header for Digital Assistant so that we can point it to your icons instead of the defaults. First navigate to Development → Manage Spaces → Global → Views → adenin.GateKeeper → App. Select New File and create a .liquid file called head.

Creating head.liquid

Select Edit on the new file, and copy the following markup into the editor:

<meta name="viewport" content="initial-scale=1.0, width=device-width, maximum-scale=1, user-scalable=no">
<title>Digital Assistant</title>
<link rel="icon" type="image/png" sizes="32x32" href="/custom-theme/app-icons/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/custom-theme/app-icons/favicon-16x16.png">
<link rel="mask-icon" href="/custom-theme/app-icons/safari-pinned-tab.svg" color="#FFFFFF">

Here, you can edit the title of your page by changing the contents of the <title> tag. This markup has pointed the app's header at the icons we just uploaded, and indicated their function to the browser.

The color option of the Safari mask-icon element determines the highlight color which will be used when the tab is selected. You should change this to a suitable alternative to represent your company's brand. If you did not add the Safari icon earlier, simply remove the associated link element from the file.

Remember to save before exiting the editor.

Google Chrome theme color support (optional)

Google's Chrome browser supports the option to apply a color to the address bar on mobile devices. If you would like to enable this, simply select Edit on head.liquid, and add the following tag:

<meta name="theme-color" content="#ffffff">

Change content to the hex code for your desired color, and press save.

Progressive Web App branding

Digital Assistant can be used as a progressive web app, allowing a user to save an icon to their mobile home screen and launch the app in its own contained window, to approximate the user experience of a native application. This is also supported by the Chrome desktop browser. You can configure Digital Assistant's progressive web app functionality so that it utilises your own logo and color schemes.

Chrome and Android configuration

Firstly, we should upload our icons. Chrome's progressive web app specifications require the application icon in two sizes: 192x192 pixels and 512x512 pixels, both in .png format.

Once you have exported your desired icon in these sizes, name them icon-192.png and icon-512.png respectively. Head back to the Workplace Manager and upload them to the same app-icons folder we created earlier.

The next step is to specify a manifest, which supplies the information required by to enable the progressive web app functionality. Navigate up one level to the custom-theme folder that contains your app-icons folder. Select New File and create a JSON file called manifest.

Creating the manifest file

Select Edit on the file and copy the following into the editor:

"short_name": "Now",
"name": "Digital Assistant",
"icons": [
"src": "./app-icons/icon-192.png",
"type": "image/png",
"sizes": "192x192"
"src": "./app-icons/icon-512.png",
"type": "image/png",
"sizes": "512x512"
"start_url": "/App#!at-now/start-now",
"background_color": "#ffffff",
"display": "standalone",
"scope": "/App#!at-now/",
"theme_color": "#ffffff"

Set the short_name property to your own value - it must be less than 12 characters and is used when there is limited text space. Then, replace name with the full name you'd like for your Digital Assistant.

The theme_color value should be set to the color you would like Android to apply to the fast-switching window for your application. Then finally, background-color determines the color of the splash screen background displayed while your app is loading - take into consideration that your logo and app name will be displayed on top of this background, and then set this to something suitable.

Save the file, then navigate back to Spaces > Global > Views > adenin.GateKeeper > App and Edit head.liquid.

Editing head.liquid

Add the following markup:

<meta name="mobile-web-app-capable" content="yes"
<link rel="manifest" href="/custom-theme/manifest.json">

This will instruct the browser that your Digital Assistant supports Chrome's progressive web app functionality, and then direct it to your manifest.json file which provides the information we just defined on how your app will be displayed. Save the file and exit the editor.

Apple iOS Configuration

The configuration for supporting progressive web app functionality on iOS simply requires providing a certain sized logo, and adding a couple of more elements to our header file.

First, export another size of your icon, 180x180 pixels in .png format, named apple-touch-icon.png, and again upload it to the app-icons folder we made earlier. Now again navigate back to Spaces > Global > Views > adenin.GateKeeper > App and Edit head.liquid. Add the following markup:

<link rel="apple-touch-icon" sizes="180x180" href="/custom-theme/app-icons/apple-touch-icon.png">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-title" content="Digital Assistant">

These tags instruct Safari on iOS which icon to use as the launch icon for your progressive web app, that your Digital Assistant supports the progressive web app functionality, and the title that will be used for it on the user's home screen, respectively. Save head.liquid and exit the editor.

Digital Assistant's progressive web app features will now be fully customised with your own branding.