Specify Chat Images

Use your own images for the pre-chat banner, logo on the waiting state when the snap-in is minimized, image on the waiting state, and the agent and Einstein Bots avatars. We recommend adding your images in Snap-ins setup, but you can use these settings to override what you have in Setup.

If the images are hosted in the same repository as the web page where you plan to add the chat snap-in, you can use either relative URL paths and names or full URLs. If the images are hosted elsewhere, use the full URLs for the images.

Before customizing the code, upload the image files that you want to use in the snap-in. Create your images in .png format and use the following sizes to ensure that the images don’t become distorted during the chat experience.

Pre-chat images

Pre-chat banner image

embedded_svc.settings.prechatBackgroundImgURL = "..."

Specify a URL to set the image shown in the pre-chat form between the greeting (for example, “Hello Guest!”) and the subtext (for example, “An agent is on the way.”).

We recommend an image that’s 320x100 pixels.

Tip

Logo for minimized snap-in in waiting state

embedded_svc.settings.smallCompanyLogoImgURL = "..."

Specify a URL to set the logo shown when the chat is minimized.

We recommend an image size that’s 25x25 pixels.

Tip

Waiting state image

embedded_svc.settings.waitingStateBackgroundImgURL = "..."

Specify a URL to set the background image when the chat is in a waiting state.

We recommend an image that’s 200x60 pixels.

Tip

Agent avatar

embedded_svc.settings.avatarImgURL = "..."

Specify a URL to set the image of the agent that appears when the agent is chatting. If your snap-in uses an automated invitation, this image appears in the top left of the invitation with the default HTML and CSS in the snippet.

We recommend an image size that’s 40x40 pixels.

Tip

Einstein Bots avatar

embedded_svc.settings.chatbotAvatarImgURL = “...”

Specify a URL to set the avatar image that appears when the customer is chatting with a bot.