xenial-black•8mo ago

"Copy" Response Button.

Hello! I am wanting to implement a "Copy" button that displays on every single response from the agent which users can click in order to copy the agent's response. I have been running in circles to look at the best way to implement this and just need a bit of guidance: can I achieve this out of the box through VF, or should I be looking to implement some custom UI and make use of VF's API? If I need to get down and create something custom then I am happy to, but would definitely prefer to save the effort if I can achieve it through simpler means.

8 Replies

Tico | Voiceflow Assistant•8mo ago

To implement a "Copy" button for each response from your agent in Voiceflow, you would need to create a custom solution, as this feature is not available out of the box. Here's a general approach you can take: 1. Custom UI Implementation: You will need to create a custom user interface that includes a "Copy" button alongside each agent response. This can be done by customizing the Web Chat widget or building your own interface using Voiceflow's APIs. 2. Using Voiceflow's API: Leverage the Dialog Manager API to handle the conversation logic. You can use the API to fetch responses from your Voiceflow agent and display them in your custom UI. 3. Copy Functionality: Implement the "Copy" functionality using JavaScript. You can add an event listener to the "Copy" button that copies the text of the agent's response to the clipboard when clicked. Here's a simple example in JavaScript:

   function copyToClipboard(text) {
       const textarea = document.createElement('textarea');
       textarea.value = text;
       document.body.appendChild(textarea);
       textarea.select();
       document.execCommand('copy');
       document.body.removeChild(textarea);
   }

   document.querySelectorAll('.copy-button').forEach(button => {
       button.addEventListener('click', function() {
           const responseText = this.previousElementSibling.textContent;
           copyToClipboard(responseText);
       });
   });

   function copyToClipboard(text) {
       const textarea = document.createElement('textarea');
       textarea.value = text;
       document.body.appendChild(textarea);
       textarea.select();
       document.execCommand('copy');
       document.body.removeChild(textarea);
   }

   document.querySelectorAll('.copy-button').forEach(button => {
       button.addEventListener('click', function() {
           const responseText = this.previousElementSibling.textContent;
           copyToClipboard(responseText);
       });
   });

4. Integration: Integrate this functionality into your web application where the responses from the Voiceflow agent are displayed. By following these steps, you can create a custom solution that meets your needs. If you prefer a simpler approach and are open to customization, this method will allow you to achieve the desired functionality.

xenial-blackOP•8mo ago

Curious. Anybody know how I would be able to achieve this by customizing the Web Chat widget?

Steve B. | IntelleSync.ai•8mo ago

Yes this could be done with extensions 👍🏽 https://docs.voiceflow.com/docs/custom-web-chat-widgets

xenial-blackOP•8mo ago

Awesome, thanks for the guidance guys! Will take a look into the extensions. Will post here once I have got it right

spiritual-aqua•8mo ago

Curious about this too! Please keep us updated

xenial-blackOP•8mo ago

Just as an update on this, I managed to get it to work! Will post about my solution closer to the end of the week. Just want to say a huge thanks for pointing me in this direction, I learnt a lot more about Voiceflow than I thought I could during this process!

spiritual-aqua•7mo ago

Amazing! Looking forward to seeing the solution @Richard Did you post a solutions somewhere already?

RabaX•2w ago

Hi Richard can you share how you aolve this? Thanks in advance

"Copy" Response Button.

Did you find this page helpful?