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.