Automatically Launching Chat Window / Widget

(Pete) #1

Hello Flow’ers.

I’d like the ability to automatically open the chat-widget on our website when the page loads. Does anybody have any nifty work-arounds or suggestions on how we could do it?

Thanks

PT

(Daniel Beckett) #2

Hi Pete,

You may find the Web Messenger API useful for this.

Thanks,
Dan

(Pete) #3

Thanks Daniel - That was helpful.

I’ve tried working with the details in this post, but it doesn’t seem to be having an effect on my window. Which is a bit strange.

I’ve installed the web-messenger on www.talktous.ai …code in the footer etc, but making changes to the chat window don’t seem to work.

(Karen Barker) #4

Hi Pete,

In order to have the chat window to open automatically on loading the page you would need to add FxoMessenger.create(); to the script on your page.

Other alterations could be things such as

FxoMessenger.setConfig({
mode: 'fullscreen',
color: '#800080'
});

This will make the web messenger take up the full screen rather than being a sidebar and change the colour.

What sort of changes have you been looking to make :question: Happy to help out if I know exactly what you’re trying to do. :slight_smile:

(Pete) #5

Epic. Thanks. That was helpful and I can see it’s now opening full page on the web-browser.

What I’d really love to be able to do is just load the window automatically when the page loads, so the user doesn’t even have to click the button / icon. Any idea how I might be able to do that?

(Pete) #6

Bingo. Got it. That all worked… thanks so much!

(Pete) #7

Thanks so much for helping solve my problem above. It was really helpful. Saved me hours (more) fiddling… sometimes the most obvious solution alludes someone.

So, as you seem to be the defacto guru on all things messaging window :slight_smile: I have another interesting one to crack… I’d like to trigger the chat window from a hyperlink as well as / instead of the chat icon. Any clues or thoughts?

(Karen Barker) #8

Hi Pete,

Haha - I’m not sure guru is the right term here but I’ll do my best. :grinning:

On the final page of setting up the Web Messenger Bot setup within your Flow XO account you would have been given 3 options. The first of these is a simple URL that you could place behind the hyperlink and this will open the chat, albeit in a new window. I guess (although I’m not a web developer so getting out of my realm a little here!!!) you could if you wanted it on the same page use Option 2 instead and using CSS hide the iFrame until someone clicks on the link?

(Pete) #9

Hmmmm. I did look at that as an option, my problem is that it takes you off our site to a Flow Url. Which isn’t going to work for me. I’d like to be able to trigger the same dialog / chat window that already sits on the page.

Ideally we’d also love to find a way to deep-link straight to a particular dialog / flow in the window when it’s triggered, which we can obviously do with a ‘FxoMessenger.sendMessage('KEY PHRASE')’ command…

I’ll have a hack around and see what I can do.

(Karen Barker) #10

Hi Pete,

Is this definitely on a link, not an image somewhere else on the page? You could add a click event listener to the img then, and create your onclick function that just opens the Web Messenger using the API call:

FxoMessenger.create();

The problem doing this on a link is obviously you’d have to reference the website in the link, which would reload the page/redirected page, which would then reload the initial web Messenger config. :thinking:

2 Likes
(Pete) #11

I’ve solved half the problem with a bit of a hack job BTW. I can now trigger specific flows by seeding in copy when the window launches on specific pages… does the job for now…

FxoMessenger.on(‘stateChanged’, function(state) {
if (state === ‘connected’) {
<?php if (is_page('PAGE NAME')): ?>
FxoMessenger.sendMessage(‘TRIGGER COPY’);
<?php endif; ?>
}
});

(Mitch Smith) #12

Pardon my java newb-ness but if I wanted to delay that action for 10 seconds, how would I go about that?

I believe

setTimeout(function() { your_func(); }, 10000);

may be involved somehow. Thank you for this assistance btw!

(Karen Barker) #13

Hi Mitch,

Javascript isn’t my forte either tbh but hopefully I can give you some pointers or someone else can jump in with an answer! :grimacing:

Looking over w3schools you definitely look to be on the right lines with what you’ve put there. There’s also a very similar question asked here on StackOverflow. I’m sure if you can’t get it working then the guys at StackOverflow will definitely be able to help. :thumbsup:

1 Like
(Mitch Smith) #14

Finally figured this out - almost a year later - with this YouTube video. Finally clicked after I watched this.

JavaScript setTimeout() Function

1 Like