WebChat Templates

Note

An additional AnywhereNow WebAgent for Omnichannel license is required.

Note

An Enterprise license or higher is required to access these features.

Almost every element of the webchat can be customized to create a unique webchat experience. The templates object should be defined as follows:

Copy

Script

interface Templates {
    themes?: Theme[];
    floatingButton?: WebChatTemplate;
    topBar?: WebChatTemplate;
}

Components

Agent placeholder

Replaces the "Agent Placeholder" with the HTML added in the Template box.

Copy

Example

<span class="agent-placeholder">
   <div class="logo">
      <webchat-image src="resource:start-chat"></webchat-image>
      <webchat-ucc-presence-indicator></webchat-ucc-presence-indicator>
   </div>
   <div class="webchat-message">
      <webchat-title></webchat-title">
      <webchat-presence-text></webchat-presence-text>
   </div>
</span>
<style>:host {
    pointer-events: none
}

.agent-placeholder {
    display: flex;
    flex-direction: row;
    margin: 15px 15px 0 15px;
    padding-bottom: 15px;
    border-bottom: 1px solid var(--border-color)
}

.logo {
    background-color: var(--primary-color);
    display: flex;
    justify-content: center;
    align-items: center
}

.logo svg {
    width: 28px;
    height: 28px;
    transition: width 200ms, height 200ms
}

.logo {
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    transition: height 200ms, width 200ms;
    width: 58px;
    height: 58px;
    border-radius: 50%;
    position: relative
}

:host([small=true]) .logo {
    width: 45px;
    height: 45px
}

:host([small=true]) .logo svg {
    width: 21px;
    height: 21px
}

.webchat-message {
    font-family: Roboto, "Segoe UI Emoji";
    display: flex;
    flex-direction: column;
    align-self: center;
    padding-left: 10px
}

.webchat-message .title {
    font-size: 16px;
    font-weight: 600;
    color: var(--text-color)
}

webchat-ucc-presence-indicator {
    position: absolute;
    right: 0;
    bottom: 0
}

</style>

Connected agent

Replaces the "Agent Placeholder" with the HTML added in the Template box.

Copy

Example

<span class="agent-display">
   <webchat-avatar size="large"></webchat-avatar>
   <div class="agent-info">
      <div class="name">{agentName}
      </div>
   </div>
</span>
<style>:host {
    pointer-events: none
}

.agent-display {
    display: flex;
    flex-direction: row;
    margin: 15px 15px 0 15px;
    padding-bottom: 15px;
    border-bottom: 1px solid var(--border-color)
}

.agent-info {
    font-family: Roboto, "Segoe UI Emoji";
    display: flex;
    flex-direction: column;
    align-self: center;
    padding-left: 10px
}

.agent-info .name {
    font-size: 16px;
    font-weight: 600;
    color: var(--text-color)
}

</style>

Notification

Replaces the "Notification" with the HTML added in the Template box.

Copy

Example

<div class="message-state">
   <div class="message-container">
      <webchat-notification-message></webchat-notification-message>
      <webchat-notification-accept></webchat-notification-accept>
   </div>
</div>
<webchat-notification-message-close></webchat-notification-message-close>
<style>:host {
    background-color: var(--notification-color);
    color: var(--color-white);
    font-family: Roboto, "Segoe UI Emoji";
    font-size: 15px;
    width: 100%;
    padding: 15px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    box-sizing: border-box
}

.hidden {
    display: none !important
}

.close-button {
    margin-left: 15px
}

.message-state {
    flex: 1 1 auto
}

.message-state .message-container {
    display: flex;
    align-items: center
}

.message-state .message-container .accept-button {
    border: 1px solid var(--color-white);
    color: var(--color-white);
    background: transparent;
    margin-left: auto;
    font-size: 13px;
    font-family: Roboto, "Segoe UI Emoji";
    height: 30px;
    flex: 0 0 70px;
    border-radius: 2px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    position: relative
}

.message-state .message-container .accept-button:focus {
    outline: none
}

.message-state .message-container .accept-button:hover::before {
    content: "";
    position: absolute;
    border-radius: 2px;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--primary-color3);
    opacity: .25
}

.message-state.has-accept-button .message {
    margin-right: 15px
}

</style>

Start button

Replaces the "Start Button" with the HTML added in the Template box.

Copy

Example

<div class="container">
   <div class="button-circle"></div>
   <span class="icon">
      <webchat-image src="resource:start-chat">
      </webchat-image>
   </span>
</div>
<webchat-unread-counter></webchat-unread-counter>
<webchat-ucc-presence-indicator></webchat-ucc-presence-indicator>
<style>:host(.unread-messages) .unread-counter {
    display: block
}

:host(.unread-messages) .button-circle {
    width: 23px;
    height: 23px;
    top: -18px;
    right: -65px
}

:host(.unread-messages) webchat-ucc-presence-indicator {
    display: none
}

.container {
    overflow: hidden;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    position: relative
}

.container .button-circle {
    position: absolute;
    top: -15px;
    right: -61px;
    width: 16px;
    height: 16px;
    background-color: transparent;
    border: 60px solid var(--primary-color);
    border-radius: 50%
}

.container .icon {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%)
}

.container svg *[fill]:not([fill=none]) {
    fill: #fff
}

.container svg *[stroke]:not([stroke=none]) {
    stroke: #fff
}

.container svg {
    transition: transform 200ms ease-in-out
}

.container:hover .button-circle {
    border-color: var(--hover-color)
}

.unread-counter {
    position: absolute;
    bottom: -3px;
    right: -3px
}

webchat-ucc-presence-indicator {
    position: absolute;
    bottom: 1px;
    right: 1px
}

</style>

Tease message

Replaces the "Tease message" with the HTML added in the Template box.

Copy

Example

<span class="message-content">
   <webchat-tease-message-text></webchat-tease-message-text>
</span>
<style>:host {
    box-shadow: 0 3px 15px var(--box-shadow-dark);
    background-color: var(--background-color2);
    padding: 12px 12px 12px 16px;
    border-radius: 3px;
    opacity: 1;
    transition: opacity 200ms;
    white-space: nowrap;
    display: block
}

.message-content {
    font-family: Roboto, "Segoe UI Emoji";
    font-size: 15px;
    color: var(--text-color)
}

</style>

Top bar

Replaces the "Tease message" with the HTML added in the Template box.

Copy

Top bar example

<div class="topbar-container">
   <webchat-theme-button></webchat-theme-button>
   <span class="top-logo-placeholder"></span>
   <span class="top-logo">
      <webchat-image src="resource:webchat-logo"></webchat-image>
      WebChat + 
   </span>
   <span class="bar-buttons">
      <webchat-minimize-button class="minimize-button"></webchat-minimize-button>
      <webchat-maximize-button class="maximize-button"></webchat-maximize-button>
      <webchat-close-button class="close-button"></webchat-close-button>
   </span>
</div>
<style>:host {
    height: 44px;
    box-sizing: border-box;
    width: 100%;
    background-color: transparent;
    padding: 0 13px;
    display: block
}

.topbar-container {
    display: flex;
    position: relative;
    height: 100%;
    align-items: center
}

.topbar-container .top-logo-placeholder {
    flex: 1 1 auto
}

.topbar-container .top-logo {
    position: absolute;
    width: 100%
}

.top-logo {
    display: flex;
    justify-content: center;
    font-family: Roboto, "Segoe UI Emoji";
    font-size: 16px;
    font-weight: 600;
    color: var(--text-color);
    pointer-events: none
}

.top-logo svg {
    width: 20px;
    height: 20px;
    margin-right: 8px
}

.bar-buttons {
    display: flex
}

.bar-buttons :not(:first-child) {
    margin-left: 10px
}

@media (max-width: 700px) {
    .maximize-button {
        display: none
    }
    .top-logo {
        margin-left: 4px;
        width: calc(100% - 92px)
    }
}

</style>