Message List Template | Axero Documentation

The Messages List template displays your most recent chat messages. The template is a built-in template and comes with your Axero site. To see the template in action, set the Axero Header as the active header in Control Panel > System > Page Builder > Header. Then exit the Control Panel and click the chat icon in the header.

Note: Although this template can be selected on any Page Builder page, the template is best used in the Page Builder: Header. Edit the Community Header in Control Panel > Page Builder > Header to see how to configure a Content List widget when using the Messages List template.

Template HTML

Below is the HTML of this template for your reference.

<div class="ax-diamond-hover-box ax-diamond-hover-box-messages">
    <ul id="ScrollContainer{{WidgetID}}" class="ax-diamond-hover-box-dropdown messages" data-widgetid="{{WidgetID}}">
        {{#each Contents.MessageThreads}}
        <li class="{{#if IsRead}}read{{else}}unread{{/if}}" data-thread-id="{{ThreadID}}">
            <a class="threadlink" href="{{ThreadURL}}"{{#if ../Contents.OpenInNewTab}} target="_blank"{{/if}}>
                <div class="axero-messages-avatar">
                    <img class="from-avatar" src="{{ThreadImageURL}}">
                </div>
                <div class="axero-messages-content">
                    <div class="axero-messages-content-username">
                        {{{ThreadTitle}}}
                    </div>
                    <div class="axero-messages-content-message">
                        {{{MessageBodyTruncated}}}
                    </div>
                    <div class="axero-messages-content-date">
                        <span class="axero-mega-time">{{DateSentText}}</span>
                    </div>
                </div>
            </a>
        </li>
        {{/each}}
        {{#unless Contents.LoadOnDropdown}}
        {{#unless Contents.MessageThreads}}
        <li class="axero-messages-nomessage-notice">
            <div class="no-entries-message">
                <h2>{{{Resources/YouDoNotHaveAnyMessagesText}}}</h2>
            </div>
        </li>
        {{/unless}}
        {{/unless}}
    </ul>
    {{#if Contents.LoadOnDropdown}}
    {{{PlaceholderHTML}}}
    {{/if}}
    {{{ScriptBlock}}}
</div>