#104 - Online Indicator v0.1

Show your site visitors your online status based on time zones.

Need help with this MemberScript?

All Memberstack customers can ask for assistance in the 2.0 Slack. Please note that these are not official features and support cannot be guaranteed.

View demo


<!-- 💙 MEMBERSCRIPT #104 v0.1 💙 ONLINE INDICATOR -->
<script>
document.addEventListener('DOMContentLoaded', function() {
    const businessHours = {
        start: 9, // Business hours start at 9 AM
        end: 17, // Business hours end at 5 PM
        days: [1, 2, 3, 4, 5] // Monday to Friday
    };
    const colors = {
        businessHours: '#34b426',
        outsideBusinessHours: '#F25022'
    };

    const wrappers = document.querySelectorAll('[ms-code-online-wrapper]');
    wrappers.forEach(wrapper => {
        const timeZone = wrapper.getAttribute('ms-code-online-wrapper');
        const dot = wrapper.querySelector('[ms-code-online="dot"]');
        const timeSpan = wrapper.querySelector('[ms-code-online="time"]');

        const now = new Date();
        const formatter = new Intl.DateTimeFormat('en-US', {
            hour: 'numeric',
            minute: '2-digit',
            timeZone: timeZone
        });
        const formattedTime = formatter.format(now);

        if (timeSpan) timeSpan.textContent = formattedTime;

        const currentDay = now.getDay();
        const currentHour = new Date().toLocaleTimeString('en-US', {
            hour: '2-digit',
            hour12: false,
            timeZone: timeZone
        });

        const isBusinessDay = businessHours.days.includes(currentDay);
        const isBusinessHour = currentHour >= businessHours.start && currentHour < businessHours.end;

        if (dot) {
            dot.style.backgroundColor = (isBusinessDay && isBusinessHour) ? colors.businessHours : colors.outsideBusinessHours;
        }
    });
});
</script>

Description

Attribute

No items found.

Creating the Make.com Scenario

1. Download the JSON blueprint below to get stated.

Download File

2. Navigate to Make.com and Create a New Scenario...

3. Click the small box with 3 dots and then Import Blueprint...

4. Upload your file and voila! You're ready to link your own accounts.

How to Display an Online Indicator on your Webflow Site

Memberscripts needed

https://www.memberstack.com/scripts/online-indicator

Tutorial

Cloneable

https://webflow.com/made-in-webflow/website/online-indicator-script?utm_medium=affiliate&ps_partner_key=ZHVuY2FuaGFtcmE1MTg5&ps_xid=SjRGS7ZReyC4Us&gsxid=SjRGS7ZReyC4Us&gspk=ZHVuY2FuaGFtcmE1MTg5

Why/When Would you need to Display an Online Indicator on your Webflow Site?

Show visitors whether or not your company’s business hours have started and your local time.

If you have a company that potential customers often reach out to for quotes or any other information, you might want to have an online indicator on your site that tells visitors whether your business hours have started.

If, for example, you’re an agency, you can have an online indicator in your site’s footer that shows visitors your local time and a colored indicator telling them whether your business hours have started so they know if they can contact you then or if they have to wait.

Displaying an online indicator on a Webflow site

To display an online indicator on a Webflow site, we’re going to use MemberScript #104 – Online Indicator. Follow the link to get the code you’ll need to add to your page and watch a video tutorial on how to set everything up.

Setting it up

The first thing you’ll need to do is create and style your online indicator.

Select your online indicator’s wrapper and add the following attribute to it:

ms-code-online-wrapper=”TIMEZONE” – the value can be EST, CET, etc.

Now select the actual indicator (e.g. green/red dot) and add the following attribute to it:

ms-code-online=”dot”

Finally, select the text block where the time will be displayed and add the following attribute to it:

ms-code-online=”time”

Making it work

Now that you’ve got everything set up, all you need to do is add the MemberScript #104 custom code to your page, before the closing body tag.

Here are a few things you can edit inside the custom code to change the indicator’s appearance:

Online/offline colors

A black background with white textDescription automatically generated

Your business hours/days

Conclusion

That’s everything, you can now go ahead and test the online indicator on your live site.

If you want to use our demo project to get you started, just click the button below to add it to your Webflow site.

Our demo can help you easily show your site visitors whether or not your business hours have started.

Take me to the Script!

Read full documentation

Button Text

Something not working as expected?

#104 - Online Indicator v0.1

Need help with this MemberScript?

Creating the Make.com Scenario

How to Display an Online Indicator on your Webflow Site

Memberscripts needed

Tutorial

Cloneable

Why/When Would you need to Display an Online Indicator on your Webflow Site?

Displaying an online indicator on a Webflow site

Setting it up

Making it work

Conclusion

Take me to the Script!

Try Memberstack for free

Product

Language

Customers

Company

Resources