Callback Template

SYSTEM ADMINTENANT ADMINSITE ADMIN

Precondition: This page is not visible until a SYSTEM ADMIN enables the feature for respective Tenants.

Callback Templates define a set of form fields to the customer. They define the look and feel of a callback functionality. They only show when <callback /> is integrated into the contact template. as part of the Contact Template.

There are two default templates which cannot be deleted or changed, only downloaded for editing / duplication purposes:

"Default Callback" Template.
"Default Floating Callback" Template.

Templates consist of a HTML file and can contain up to 14 JSON translation files to support all the languages. E.g. if a site only needs to support German it's enough to upload the _de.json file only

Default Callback Templates

Add to Contact Template

In order to make use of the Callback functionality the following tag needs to be included → <callback/>

<div class="lw-contact {{contact.availabilityStyle}}" id="{{contact.sip}}" data-uri="{{contact.sip}}" data-lync-presence="{{contact.status.type}}" data-name="{{contact.displayName}}" data-lync-presence-title="{{contact.status.type}}">
    <div class="lw-avatar" style="background-image: url('{{contact.status.avatarUrl | defaultAvatar}}');" title="{{contact.displayName}} {{contact.availability | uppercase | translate}}">
        <callback/>
        <div class="lw-status" id="presence-state-content">{{contact.status.type | uppercase | translate}}</div>
    </div>
...

CODE

Example

Here is an example of a floating or regular template

<div class="lw-chat-form-wrapper lw-callback-popup">
    <form name="callbackForm" ng-submit="enter(callbackForm.$valid)" novalidate>
        <div class="lw-custom-request-form">
            <div class="lw-custom-form-header">
                <div class="lw-custom-form-title">{{'SCHEDULE_CALLBACK' | translate}}</div>
                <div class="lw-custom-form-actions">
                    <a class="lw-custom-form-popup-close" title="{{'CHANGENAME_CLOSE' | translate}}" ng-click="dismiss()"><i class="fa fa-times"></i></a>
                </div>
            </div>
            <div class="lw-custom-form-body">
                <ul>
                    <li>
                        <custom-input name-value="target"
                                      placeholder="{{'TARGETNAME' | translate}}"
                                      regex-pattern="^(((sip:)?([0-9a-zA-Z\._%+-]+)@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.)|(([\w-]+\.)+))([a-zA-Z]{2,5}|[0-9]{1,3})(\]?))|((tel:)?(\+)([0-9]{10,15})))$"
                                      regex-pattern-error="{{'TARGETNAME_VALIDATIONERROR' | translate}}"
                                      required="true"
                                      required-error="{{'REQUIRED_VALIDATIONERROR' | translate}}"
                                      on-update-details="updateDetails(name, value)"></custom-input>
                    </li>
                    <li>
                        <custom-date-time-picker name-value="dueDate"
                                                 placeholder="{{'CALLBACK_DATETIME' | translate}}"
                                                 required="true"
                                                 on-select-date="selectDate(selectedDate)"
                                                 required-error="{{'REQUIRED_VALIDATIONERROR' | translate}}"></custom-date-time-picker>
                    </li>
                    <li>
                        <custom-input name-value="comments"
                                      placeholder="{{'CALLBACK_COMMENTS' | translate}}"
                                      max-length="300"
                                      max-length-error="{{MAXLENGTH_VALIDATIONERROR | translate}}"
                                      on-update-details="updateDetails(name, value)"></custom-input>
                    </li>
                    <li><span class="lw-validation-message">{{errorMessage | translate}}</span></li>
                </ul>
            </div>
            <div class="lw-custom-form-footer">
                <button ng-disabled="!callbackForm.$valid || !hasDate" class="lw-button">{{'SCHEDULE_CALLBACK' | translate}}</button>
            </div>
        </div>
    </form>
</div>

XML