APIs & Integrations

MicaelaH
参加者

Delaying chat messages and bots?

解決

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件の承認済みベストアンサー
Riadhoq
解決策
メンバー

Delaying chat messages and bots?

解決

 

<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

 

元の投稿で解決策を見る

9件の返信
cbarley
元HubSpot社員
元HubSpot社員

Delaying chat messages and bots?

解決

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 いいね!
STU131
参加者

Delaying chat messages and bots?

解決

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
メンバー

Delaying chat messages and bots?

解決

I get:

 

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

When using this method. 

Any thoughts?

 

 

 

0 いいね!
Riadhoq
メンバー

Delaying chat messages and bots?

解決
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 いいね!
soumlabs
投稿者

Delaying chat messages and bots?

解決

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

0 いいね!
Riadhoq
メンバー

Delaying chat messages and bots?

解決
In the setTimeout function use window.HubSpotConversations.widget.load(); and don’t pass in the widgetOpen: true option
0 いいね!
soumlabs
投稿者

Delaying chat messages and bots?

解決

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 いいね!
Riadhoq
メンバー

Delaying chat messages and bots?

解決

@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 いいね!
Riadhoq
解決策
メンバー

Delaying chat messages and bots?

解決

 

<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