Delaying chat messages and bots?

[MicaelaH]

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

[cbarley]

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>

[STU131]

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]

I get:

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

When using this method. 

Any thoughts?

[Riadhoq]

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.

[soumlabs]

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

[Riadhoq]

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

[soumlabs]

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!

[Riadhoq]

@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>

[Riadhoq · Accepted solution]

<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