Property reference

glide.live.chat_html_card_template

The glide.live.chat_html_card_template property defines the HTML and CSS structure for chat cards in the ServiceNow platform. Admins should review this property to customize the appearance of chat interactions to align with branding or user experience requirements.

Default: <style> .vac-card { white-space: normal; } .vac-header { border-bottom: solid 1px #c7c7c7; padding-bottom: 4px; margin-bottom: 8px; } .vac-header-title { display: inline-block; } .vac-header-subtitle { float: right; } .vac-link { font: 1.6rem SourceSansProSemibold,Helvetica Neue,Helvetica,Arial,sans-serif; color: #6BA89E; text-decoration: none; font-weight: bold; } .vac-content { padding-bottom: 4px; display: flex; font-size: 12px; } .vac-content-label { width: 78px; text-align: left; flex-shrink: 0; font: 0.8rem SourceSansProSemibold,Helvetica Neue,Helvetica,Arial,sans-serif; display: inline-block; } .vac-content-value { padding-left: 8px; justify-self: left; display: inline-block; } </style> <div class = "vac-card"> <div class = "vac-body"> <div class = "vac-header"> <div class ="vac-header-title">{{title}} </div> <div class="vac-header-subtitle"> <a class = "vac-link" href="{{url}}">{{subtitle}}</a> </div> </div> <div class = "vac-content"> <div class= "vac-fields"> {{fields}} </div> </div> </div> </div> Type: string Application: Global

Key questions about this property

The answers below summarize the purpose, scope, default effect, and review scenarios for this property.

What does it do? This property specifies the HTML and CSS template used for rendering chat cards, affecting their layout and styling in the live chat interface.
What area does it affect? Live chat interface
What does the default mean? The default value is "<style> .vac-card { white-space: normal; } .vac-header { border-bottom: solid 1px #c7c7c7; padding-bottom: 4px; margin-bottom: 8px; } .vac-header-title { display: inline-block; } .vac-header-subtitle { float: right; } .vac-link { font: 1.6rem SourceSansProSemibold,Helvetica Neue,Helvetica,Arial,sans-serif; color: #6BA89E; text-decoration: none; font-weight: bold; } .vac-content { padding-bottom: 4px; display: flex; font-size: 12px; } .vac-content-label { width: 78px; text-align: left; flex-shrink: 0; font: 0.8rem SourceSansProSemibold,Helvetica Neue,Helvetica,Arial,sans-serif; display: inline-block; } .vac-content-value { padding-left: 8px; justify-self: left; display: inline-block; } </style> <div class = "vac-card"> <div class = "vac-body"> <div class = "vac-header"> <div class ="vac-header-title">{{title}} </div> <div class="vac-header-subtitle"> <a class = "vac-link" href="{{url}}">{{subtitle}}</a> </div> </div> <div class = "vac-content"> <div class= "vac-fields"> {{fields}} </div> </div> </div> </div>", which is the baseline setting used unless it is changed.
When should you review it? Review this property when needing to update the chat card design or branding.

Out of the box property record

Raw metadata from the property record.

Property name glide.live.chat_html_card_template
Sys ID 71a39f99db41e300db2051735e961928
Type string
Application Global
Default value <style> .vac-card { white-space: normal; } .vac-header { border-bottom: solid 1px #c7c7c7; padding-bottom: 4px; margin-bottom: 8px; } .vac-header-title { display: inline-block; } .vac-header-subtitle { float: right; } .vac-link { font: 1.6rem SourceSansProSemibold,Helvetica Neue,Helvetica,Arial,sans-serif; color: #6BA89E; text-decoration: none; font-weight: bold; } .vac-content { padding-bottom: 4px; display: flex; font-size: 12px; } .vac-content-label { width: 78px; text-align: left; flex-shrink: 0; font: 0.8rem SourceSansProSemibold,Helvetica Neue,Helvetica,Arial,sans-serif; display: inline-block; } .vac-content-value { padding-left: 8px; justify-self: left; display: inline-block; } </style> <div class = "vac-card"> <div class = "vac-body"> <div class = "vac-header"> <div class ="vac-header-title">{{title}} </div> <div class="vac-header-subtitle"> <a class = "vac-link" href="{{url}}">{{subtitle}}</a> </div> </div> <div class = "vac-content"> <div class= "vac-fields"> {{fields}} </div> </div> </div> </div>
Description
Updated 2024-05-25 03:39:02