APIs & Integrations

MicaelaH
Participante

Delaying chat messages and bots?

resolver

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 Soluciones aceptada
Riadhoq
Solución
Miembro

Delaying chat messages and bots?

resolver

 

<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

 

Ver la solución en mensaje original publicado

9 Respuestas 9
cbarley
Exmiembro de HubSpot
Exmiembro de HubSpot

Delaying chat messages and bots?

resolver

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 Me gusta
STU131
Participante

Delaying chat messages and bots?

resolver

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
Miembro

Delaying chat messages and bots?

resolver

I get:

 

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

When using this method. 

Any thoughts?

 

 

 

0 Me gusta
Riadhoq
Miembro

Delaying chat messages and bots?

resolver
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 Me gusta
soumlabs
Colaborador

Delaying chat messages and bots?

resolver

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

0 Me gusta
Riadhoq
Miembro

Delaying chat messages and bots?

resolver
In the setTimeout function use window.HubSpotConversations.widget.load(); and don’t pass in the widgetOpen: true option
0 Me gusta
soumlabs
Colaborador

Delaying chat messages and bots?

resolver

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 Me gusta
Riadhoq
Miembro

Delaying chat messages and bots?

resolver

@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 Me gusta
Riadhoq
Solución
Miembro

Delaying chat messages and bots?

resolver

 

<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