How to trigger Conversation Start only after clicking on the chat bubble button on a custom website

Like (0) Share

Report

Posted on 22 Aug 2024 09:56:13 by SS-22080935-0

Hi,

We have integrated copilot in a custom website and noticed that the messages from the "Conversation Start" topic are sent every time the website is accessed.

This fills up our transcripts with unnecessary data.

We can use the Turn Count, but would like to know if there is a way to trigger the "Conversation Start" topic only when the chat bubble is clicked on.

I tried using the event trigger, but couldn't get it to work.

Attached the code used for the website.

This is what I set in Copilot

Thanks

Categories:

General

All responses (6)

Answers (0)

Suggested answer

Artur Stepniak 1,521 Super User 2025 Season 1 on 28 Nov 2024 at 07:50:08

Like (0)

Report

How to trigger Conversation Start only after clicking on the chat bubble button on a custom website

Hello,

can you mark the reply as solved? That way others can benefit from it. Thanks!

Best regards,

Artur
SS-22080935-0 5 on 27 Nov 2024 at 15:47:55

Like (0)

Report

How to trigger Conversation Start only after clicking on the chat bubble button on a custom website

Hi Artur

We did a test today and confirm this works by dynamically injecting the iFrame.

Thanks again for your help.
Artur Stepniak 1,521 Super User 2025 Season 1 on 26 Nov 2024 at 12:00:23

Like (0)

Report

How to trigger Conversation Start only after clicking on the chat bubble button on a custom website

Hello,

I'm not a JS specialist, but as I've said - it's always loaded in the DOM so probably that's why it runs the conversation start. What I could suggest is to dynamically inject "chat-frame" div when the button is clicked, instead of statically writing it in the code. That way the frame would render only when the button is clicked. Here's an example website which has that kind of functionality implemented: https://www.amstel.nl/.

Let me know if it worked. :-)

Best regards,

Artur Stepniak
SS-22080935-0 5 on 26 Nov 2024 at 10:29:32

Like (0)

Report
How to trigger Conversation Start only after clicking on the chat bubble button on a custom website

Hi Artur and Yasir.

Thank you for your responses.

The trigger for Topic "Conversation Start" is currently set to "On Conversation Start".

This is the code used on the page. What do you suggest changing?

<div class="chat-support"> <div class="chat-wrap"> <div class="chat-frame"> <iframe src=https://copilotstudio.microsoft.com/environments/.../webchat?__version__=2 frameborder="0" style="width: 100%; height: 100%;"></iframe> </div> <div class="chat-bubble"> <span>Ask our virtual assistant</span> <button><img src="Picture.svg"/></button> </div> </div> </div> <style> .chat-support { position: fixed; bottom: 100px; right: 100px; z-index: 999; } .chat-support .chat-wrap { position: relative; } .chat-support .chat-frame { display: none; position: absolute; bottom: 80px; right: 0; border: 1px solid #444; max-width: 555px; width: calc(100vw - 80px); height: 630px; } .chat-support .chat-bubble { display: flex; align-items: center; } .chat-support .chat-bubble span { padding: 10px 40px 10px 10px; background: #F0F0F0; margin-right: -30px; } .chat-support .chat-bubble button { cursor: pointer; background: transparent; border: none; width: 60px; height: 60px; padding: 0; transition: transform 200ms ease; transform-origin: center; } .chat-support .chat-bubble button:hover { transform: scale(1.1); } .chat-support .chat-bubble button img { width: 100%; height: 100%; background-size: contain; } .chat-support.open .chat-frame { display: block; } @media only screen and (max-width: 767px) { .chat-support { right: 40px; bottom: 40px; } .chat-support .chat-frame { height: 68vh; bottom: 70px; } .chat-support .chat-bubble span { display: none; } .chat-support .chat-bubble button { width: 50px; height: 50px; } } </style> <script> const chatSupport = document.querySelector('.chat-support'); const chatSupportBtn = chatSupport.querySelector('button'); chatSupportBtn.addEventListener('click', evt => { evt.preventDefault(); chatSupport.classList.toggle('open') }); </script>
Artur Stepniak 1,521 Super User 2025 Season 1 on 26 Nov 2024 at 09:54:25

Like (0)

Report

How to trigger Conversation Start only after clicking on the chat bubble button on a custom website

Hello,

I think that it's not related to the agent configuration, but to the site code. I'd leave the trigger as it is, so 'On Conversation Start', but check JS code to see how the event is performed when the button is clicked. Isn't the chat embed preloaded? It should load only after the button is clicked.

Best regards,

Artur Stepniak
Yasir_rd 91 on 26 Nov 2024 at 06:43:26

Like (0)

Report

How to trigger Conversation Start only after clicking on the chat bubble button on a custom website

Have you tried changing the trigger to On Conversation Start.