How to add Business Hours to your pre-chat form

Even though there is no default option to display business hours in your pre-chat form, you are able to add them using custom fields. To do so, navigate to Configuration > Chat > Chat buttons > Edit your chat button.

In the Pre-chat > Fields tab click the Add Field option and then Create Field. Follow the screenshot below:

Click Create to save your field. The content can be adjusted by clicking Description. Feel free to use our pre-defined business hours template:

<style>
.hours {
    width: 100%;
    font-size: 13px;
    position: relative;
    top: -35px;
}
.hours h2 {
    text-align: center;
}
.hours dt {
    font-weight: bold
}
.hours dt,
.hours dd {
    display: inline-block;
    margin-bottom: 1em;
}
.hours-day-label {
    width: 40%;
    float: left;
    text-align: left;
}
.hours-day {
    width: 60%;
    margin-left: 0;
    float: right;
    text-align: right;
}
.hours-days {
    padding: 1em;
        padding-top: 0;
}
</style>
<section class="hours" id="hours">
    <div style="padding:15px;background-color: white;color:#333;border-radius: 5px;">
        <h2 style="font-weight: bold;font-size: 15px;">Business Hours</h2>
    </div>
    <dl class="hours-days clearfix">
        <dt class="hours-day-label">Monday</dt>
        <dd class="hours-day">9:00 AM - 5:00 PM</dd>
        <dt class="hours-day-label">Tuesday</dt>
        <dd class="hours-day">9:00 AM - 5:00 PM</dd>
        <dt class="hours-day-label">Wednesday</dt>
        <dd class="hours-day">9:00 AM - 5:00 PM</dd>
        <dt class="hours-day-label">Thursday</dt>
        <dd class="hours-day">9:00 AM - 5:00 PM</dd>
        <dt class="hours-day-label">Friday</dt>
        <dd class="hours-day">9:00 AM - 5:00 PM</dd>
        <dt class="hours-day-label">Saturday</dt>
        <dd class="hours-day">closed</dd>
        <dt class="hours-day-label">Sunday</dt>
        <dd class="hours-day">closed</dd>
    </dl>
</section>

Do not forget to APPLY the new Description and SAVE the pre-chat form.

×