Styling Your Web Chat

Syntelate Studio offers lots of options for styling how your web chat will look on your website.

Setting the Position

You can configure your web chat to appear in one of the following positions on your website:

• Left-hand side
• Bottom left
• Bottom right
• Right-hand side

To set the web chat position, follow these steps:

1. From the Web Chat configuration home page, click VIEW for the web chat that you want to edit. The Web Chat page is shown.
2. In the Web Chat details section, click . The fields are unlocked for editing.
3. In the Position dropdown, select the position for the web chat.
4. Click .

Setting the Title

You can set the title of your web chat.

To set the web chat title, follow these steps:

1. From the Web Chat configuration home page, click VIEW for the web chat that you want to edit. The Web Chat page is shown.
2. In the “Let’s Chat” options section, click . The fields are unlocked for editing.
3. In the Title text box, type a title for your web chat.
4. Click .

Setting the Images

Syntelate Studio lets you set three different images for your web chat:

• Main image
• Title image
• Footer image

To set the web chat images, follow these steps:

1. From the Web Chat configuration home page, click VIEW for the web chat that you want to edit. The Web Chat page is shown.
2. In the Web Chat details section, click . The fields are unlocked for editing.
3. Under Main image source, click No image (if you do not want to use an image), Predefined image (to select one of the default images), or Uploaded image (to upload a new image).
4. If you selected Predefined image:
   1. Under Select an image, click the image that you want to use.

   2. In the Main image position dropdown, select whether the image should be left, center, or right aligned.

      Note: The Main image position dropdown is only visible for web chats with a position of bottom left or bottom right.

5. If you selected Uploaded image:
   1. Click BROWSE FILE to open the Open dialog box.

   2. Select your image, and then click Open.

      Note: Your image must have one of the following file name extensions: .gif, .jpg, .jpeg, .png.

      For best results, use an image that is 30 x 30 pixels. You can upload an image with different dimensions, but it will be resized to 30 x 30 pixels.

   3. In the Main image position dropdown, select whether the image should be left, center, or right aligned.

      Note: The Main image position dropdown is only visible for web chats with a position of bottom left or bottom right.

6. Repeat steps 2–4 for Title image source and Footer image source.
7. Click .

Setting the Web Chat Color

You can set the color for your web chat. This color is used for:

• The button that the customer clicks to start the web chat
• The title bar
• The control buttons (for example, START CHAT and SEND)
• Customer messages

To set the web chat color, follow these steps:

1. From the Web Chat configuration home page, click VIEW for the web chat that you want to edit. The Web Chat page is shown.
2. In the “Let’s Chat” options section, click . The fields are unlocked for editing.
3. Under Web Chat widget color, click Selected color. A box appears.
4. Click the box and then select a color, or type the HEX color code if you know it.
5. Click .

Setting the Text Color

You can set the text color for the web chat. This color is used for:

• The title
• The button text (for example, START CHAT and SEND)

To set the text color, follow these steps:

1. From the Web Chat configuration home page, click VIEW for the web chat that you want to edit. The Web Chat page is shown.
2. In the “Let’s Chat” options section, click . The fields are unlocked for editing.
3. Click the Text color box and then select a color, or type the HEX color code if you know it.
4. Click .

Advanced Styling

You can further customize the styling of your web chat using CSS (cascading style sheets).

To add custom CSS to your web chat, follow these steps:

1. From the Web Chat configuration home page, click VIEW for the web chat that you want to edit. The Web Chat page is shown.
2. In the Web Chat details section, click . The fields are unlocked for editing.

3. In the Custom CSS box, type your CSS. The following table shows the selectors that you can use.

   Warning: Do not use any other selectors in the Custom CSS box. This could affect the styling of your website.

   CSS selector	HTML element
   #inisoftChatContainer	div for the web chat plugin
   #inisoftWantToChat	div for the web chat button (when web chat is closed)
   #inisoftLetsChatLogo	img for the main image (when web chat is closed)
   #inisoftLetsChatLabel	span for the title of your web chat (when web chat is closed)
   #inisoftChatHeader	div for the title bar (when web chat is open)
   #inisoftChatHeaderTitle	div for the image and text in the title bar (when web chat is open)
   #inisoftchatHeaderBtns	div for the minimize and close buttons in the title bar (when web chat is open)
   #inisoftChatClientContent	div for the chat interface (when web chat is open)

4. Click .