Specify Chat Images

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 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.”).

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.

Waiting state image

embedded_svc.settings.waitingStateBackgroundImgURL = "..."

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

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.

Einstein Bots avatar

embedded_svc.settings.chatbotAvatarImgURL = “...”