Business Hours Widget
Create a customizable business hours display widget with embed code
Basic Settings
Business Hours
to
to
to
to
to
Closed
Closed
Live Preview
My Business
America/New York
ClosedOpens at 9:00 AM
Monday9:00 AM - 5:00 PM
Tuesday9:00 AM - 5:00 PM
Wednesday9:00 AM - 5:00 PM
Thursday9:00 AM - 5:00 PM
Friday9:00 AM - 5:00 PM
SaturdayClosed
SundayClosed
Embed Code
<!-- Business Hours Widget -->
<div style="font-family:system-ui,-apple-system,sans-serif;background:#fff;color:#333;border:1px solid #e5e7eb;border-radius:12px;padding:20px;max-width:360px">
<h3 style="margin:0 0 4px 0;font-size:18px;font-weight:600">My Business</h3>
<p style="margin:0 0 16px 0;font-size:12px;opacity:0.7">America/New York</p>
<div style="display:flex;align-items:center;gap:8px;margin-bottom:16px;padding:12px;background:#fee2e2;border-radius:8px">
<span style="width:12px;height:12px;border-radius:50%;background:#ef4444"></span>
<span style="font-weight:600;color:#991b1b">Closed</span>
<span style="color:#991b1b;font-size:14px">Opens at 9:00 AM</span>
</div>
<div style="font-size:14px">
<div style="display:flex;justify-content:space-between;padding:8px 0;border-bottom:1px solid #e5e7eb">
<span style="font-weight:500">Monday</span>
<span>9:00 AM - 5:00 PM</span>
</div><div style="display:flex;justify-content:space-between;padding:8px 0;border-bottom:1px solid #e5e7eb">
<span style="font-weight:500">Tuesday</span>
<span>9:00 AM - 5:00 PM</span>
</div><div style="display:flex;justify-content:space-between;padding:8px 0;border-bottom:1px solid #e5e7eb">
<span style="font-weight:500">Wednesday</span>
<span>9:00 AM - 5:00 PM</span>
</div><div style="display:flex;justify-content:space-between;padding:8px 0;border-bottom:1px solid #e5e7eb">
<span style="font-weight:500">Thursday</span>
<span>9:00 AM - 5:00 PM</span>
</div><div style="display:flex;justify-content:space-between;padding:8px 0;border-bottom:1px solid #e5e7eb">
<span style="font-weight:500">Friday</span>
<span>9:00 AM - 5:00 PM</span>
</div><div style="display:flex;justify-content:space-between;padding:8px 0;border-bottom:1px solid #e5e7eb">
<span style="font-weight:500">Saturday</span>
<span>Closed</span>
</div><div style="display:flex;justify-content:space-between;padding:8px 0;border-bottom:1px solid #e5e7eb">
<span style="font-weight:500">Sunday</span>
<span>Closed</span>
</div>
</div>
</div>Copy this HTML code and paste it into your website to display your business hours.
How to Use
1. Enter your business name and select your timezone.
2. Configure your operating hours for each day of the week.
3. Choose a widget theme that matches your website design.
4. Enable or disable the current status indicator.
5. Copy the embed code and paste it into your website HTML.
Note: The current status is calculated based on the configured timezone and may need server-side rendering for accurate real-time updates on your website.