On Josef, you can style your bot so it fits the look and feel of your organisation.
You can customise how your bot looks by controlling:
- Form vs chat user experience
- Colours
- Bot icon
- Bot image
- Sidebar links
- The size and shape of your bot
You can set up the default styling for all bots created in your account in the My account tab in the purple toolbar.
You can also customise branding of each individual bot in the Design tab, located in the left hand panel of the dashboard.
Form vs chat user experience
You can control whether users interact with your bot as a form or chat.
In the Design tab, simply select between ‘Chat’ or ‘Form’ from the drop-down under the heading ‘Experience’.
Colours
You can customise the colour scheme of your bots in your account.
To set the default colour scheme for all bots in your account, go to:
- My account tab in the top navigation bar
- Select Default design in the left hand panel
If you know your brand’s colour code, you can enter it directly into the Main colour field. Or, you can use the dropper tool to select the right colour for your brand. The Secondary colour will always be white.
Your bot will be styled with the Main colour and Secondary colour fields.
To further customise the colour schemes of individual bots in your account:
- Select your bot from the drop-down list in the top navigation bar
- Select the Design tab in the left hand panel
- You can apply all of the same things at the individual bot level as you can in the Default design tab, including: bot colour, icon, and image.
The design changes for an individual bot in the Design tab will override your default designs.
Bot icon
The bot icon is displayed in the top left corner in the sidebar of your bot. In the Default design or Design tab, you can simply drag and drop an image or click the space to upload an image.
You are able to upload files including: .JPG, .JPEG, .PNG, and .GIF.
The recommended dimensions for the icon is: 100px by 100px.
Bot image
The bot image is displayed in the Information tab in the sidebar of your bot. In the Default design or Design tab, you can simply drag and drop an image or click the space to upload an image.
You are able to upload files including: .JPG, .JPEG, .PNG, and .GIF.
The recommended dimensions for the image are:
- Square image: 700px by 700px
- Landscape image: 700px by 500px
- Portrait image: 700px by 900px
Sidebar links
If you'd like your end user to be able to have easy access to important links such as FAQs or your contact details, you can easily add links to the sidebar. You can see step-by-step instructions in our Create a new bot article.
Size and shape
Bots will be accessible via links, and, if distributed this way, can take up the whole window.
You can also customise the size and shape of the bot if you want it to sit on an existing webpage. Our team can send you an embed code which will create an iframe (a window on the webpage) in which your bot will appear. Your website manager can manipulate the size and shape of the iframe if you want.