APIs & Integrations

MicaelaH
Participant

Delaying chat messages and bots?

SOLVE

We'd like to delay our HubSpot chat to appear several seconds after someone lands on a page, so they can process what's going on before we start offering help.

Alternatively, we would be open to having the chat appear once someone is a certain percentage of the way down a page, similar to HubSpot Lead Flows/Pop-up Forms act.

Any ideas for how to make either of these happen? Neither seems to be a feature. There is a similar Idea post, but a HubSpot employee recommended that I ask the Developer Forum.

Thanks in advance!
Micaela

1 Accepted solution
Riadhoq
Solution
Member

Delaying chat messages and bots?

SOLVE

 

<script >
    //delay hubspot chat
    jQuery(document).ready(function() {

        var isMobile = window.matchMedia("only screen and (max-width: 760px)").matches;

        if (window.HubSpotConversations) {
            window.hsConversationsSettings = {
                loadImmediately: false,
            };
        } else {
            window.hsConversationsOnReady = [
                () => {
                    window.hsConversationsSettings = {
                        loadImmediately: false,
                    };
                },
            ];
        }
        setTimeout(function() {
//don't load widgetOpen on mobile
            if (isMobile) {
                window.HubSpotConversations.widget.load();
            } else {
                window.HubSpotConversations.widget.load({
                    widgetOpen: true
                });
            }
        }, 30000);
    });
</script>

Hi @MicaelaH, hope this snippet above helps. This is where I found the solution, https://developers.hubspot.com/docs/methods/conversations_api/hubspot-conversations-javascript-api

 

View solution in original post

9 Replies 9
cbarley
HubSpot Alumni
HubSpot Alumni

Delaying chat messages and bots?

SOLVE

Hi @micaelah, that's right there's not currently a built in method to do this type of manipulation, but the ideas forum would be a great place to start! That said, you can use a bit of a hacky workaround where you hide the messages widget all the time, then only decide to show it when the window is 50% scrolled, or after a certain amount of time.

They're not really supported features, but the code would be something like this:

For the chat widget to appear after 3 seconds:

In the head HTML put this CSS

<style>
  div#hubspot-messages-iframe-container {
    display: none!important;
  }
</style>

In the Footer HTML put this code:

<script>
   setTimeout(function() {
       $("body #hubspot-messages-iframe-container").css("cssText", "display: block!important");
       $("body #hubspot-messages-iframe-container").css("height", "234px");
       $("body #hubspot-messages-iframe-container").css("width", "276px");
     }, 3000)
</script>

The part at the end, after the comma where it says 3000 is the amount of time that the browser should wait after load for the code to be fired. This is in milliseconds. If you wanted the code to be fired after 10 seconds, you'd use 10000 in place of 3000

For the chat widget to appear after 50% scrolled:

Same CSS as above in the Head HTML

In the Footer HTML:

<script>
  $(window).scroll(function() {
    if($(window).scrollTop() / $(window).height() > .5) {
      $("body #hubspot-messages-iframe-container").css("cssText", "display: block!important");
      $("body #hubspot-messages-iframe-container").css("height", "234px");
      $("body #hubspot-messages-iframe-container").css("width", "276px");
      $(window).unbind("scroll");
    }
  });
</script>
0 Upvotes
STU131
Participant

Delaying chat messages and bots?

SOLVE

Hi there, any idea when an no-code option for this would be coming out?
This is a big consideration really dampening our eagerness for the service hub...

tintinve
Member

Delaying chat messages and bots?

SOLVE

I get:

 

(index):1258 Uncaught TypeError: $ is not a function

When using this method. 

Any thoughts?

 

 

 

0 Upvotes
Riadhoq
Member

Delaying chat messages and bots?

SOLVE
The example that I posted is using jquery. Either you need to convert the code to vanilla js, or simply add jquery to your project. If you’re already using jquery, then make sure it loads prior to the delay script.
0 Upvotes
soumlabs
Contributor

Delaying chat messages and bots?

SOLVE

Hey your script works @Riadhoq but it opens the chat window. I only want to display the widget without opening the chat.

0 Upvotes
Riadhoq
Member

Delaying chat messages and bots?

SOLVE
In the setTimeout function use window.HubSpotConversations.widget.load(); and don’t pass in the widgetOpen: true option
0 Upvotes
soumlabs
Contributor

Delaying chat messages and bots?

SOLVE

Hey @Riadhoq since I am not comfortable in editing code, I might be doing mitakes. I just edited the value "true" to "false" and it completely stops the text popup to appear and the widget is still loading right away. Can you please edit the code for me to not load the chat? Thank you!

0 Upvotes
Riadhoq
Member

Delaying chat messages and bots?

SOLVE

@soumlabs  If you're still looking for the answer, the following should work

<script >
    //delay hubspot chat
    jQuery(document).ready(function() {

        if (window.HubSpotConversations) {
            window.hsConversationsSettings = {
                loadImmediately: false,
            };
        } else {
            window.hsConversationsOnReady = [
                () => {
                    window.hsConversationsSettings = {
                        loadImmediately: false,
                    };
                },
            ];
        }
        setTimeout(function() {
           window.HubSpotConversations.widget.load();
        }, 30000);
    });
</script>

 

0 Upvotes
Riadhoq
Solution
Member

Delaying chat messages and bots?

SOLVE

 

<script >
    //delay hubspot chat
    jQuery(document).ready(function() {

        var isMobile = window.matchMedia("only screen and (max-width: 760px)").matches;

        if (window.HubSpotConversations) {
            window.hsConversationsSettings = {
                loadImmediately: false,
            };
        } else {
            window.hsConversationsOnReady = [
                () => {
                    window.hsConversationsSettings = {
                        loadImmediately: false,
                    };
                },
            ];
        }
        setTimeout(function() {
//don't load widgetOpen on mobile
            if (isMobile) {
                window.HubSpotConversations.widget.load();
            } else {
                window.HubSpotConversations.widget.load({
                    widgetOpen: true
                });
            }
        }, 30000);
    });
</script>

Hi @MicaelaH, hope this snippet above helps. This is where I found the solution, https://developers.hubspot.com/docs/methods/conversations_api/hubspot-conversations-javascript-api