Hola! ¡Tenemos nuestra Comunidad en Español!

Delaying chat messages and bots?

SOLVE
Highlighted
Occasional Contributor

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

Reply
0 Upvotes
1 Accepted solution

Accepted Solutions
Occasional Contributor

 

<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

 

4 Replies
HubSpot Moderator

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>
Reply
0 Upvotes
Occasional Contributor

 

<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

 

New Member

I get:

 

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

When using this method. 

Any thoughts?

 

 

 

Reply
0 Upvotes
Occasional Contributor
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.
Reply
0 Upvotes