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

(0) Share

Report

Posted on 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 topics

I have the same question (0)

All responses (6)

Answers (0)

Yasir_rd 91 on at

Like (0)

Report
Copy link

Link copied!

Have you tried changing the trigger to On Conversation Start.

Was this reply helpful? Yes No
Artur Stepniak 1,539 Moderator on at

Like (0)

Report
Copy link

Link copied!

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

Was this reply helpful? Yes No
SS-22080935-0 5 on at

Like (0)

Report
Copy link

Link copied!
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>

Was this reply helpful? Yes No
Artur Stepniak 1,539 Moderator on at

Like (0)

Report
Copy link

Link copied!

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

Was this reply helpful? Yes No
SS-22080935-0 5 on at

Like (0)

Report
Copy link

Link copied!

Hi Artur

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

Thanks again for your help.

Was this reply helpful? Yes No
Suggested answer

Artur Stepniak 1,539 Moderator on at

Like (0)

Report
Copy link

Link copied!

Hello,

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

Best regards,

Artur

Was this reply helpful? Yes No