RomAIx•17mo ago

Extension Help: Feedback Thumbs

Does anyone know what action body and Javascript I need to implement in the feedback extension to get the right response when the user clicks thumbs up or down? I tried following @NiKo | Voiceflow's video but I have not managed to make this extension work

5 Replies

Tico | Voiceflow Assistant•17mo ago

To implement the feedback extension for thumbs up or down in Voiceflow, you need to follow a few steps. Firstly, you need to define your extension in your web chat installation code. This extension will be of the 'response' type as it will render a custom widget inside the Voiceflow Web Chat. Here's an example of how you might define a 'Feedback' extension:

const FeedbackExtension = {
  name: 'Feedback',
  type: 'response',
  match: (args) => args.trace.payload.extension === 'Feedback',
  render: (args) => {
    // Your custom rendering code goes here
  }
};

const FeedbackExtension = {
  name: 'Feedback',
  type: 'response',
  match: (args) => args.trace.payload.extension === 'Feedback',
  render: (args) => {
    // Your custom rendering code goes here
  }
};

In the 'match' function, you're checking if the payload of the incoming trace matches the name of your extension. If it does, the 'render' function will be called to render your custom widget. Next, you need to trigger this extension in your Voiceflow design using the custom action step. The action body would look something like this:

{
  "extension": "Feedback",
  "data": {
    // Any additional data you want to pass to your extension
  }
}

{
  "extension": "Feedback",
  "data": {
    // Any additional data you want to pass to your extension
  }
}

Responses from the custom action are saved in a variable called lastevent in Voiceflow. This can be accessed and parsed using the Javascript step. For example, if you want to access the name from the payload, you can use name = lastevent.payload.name. Finally, in your 'render' function, you need to implement the logic for handling the user's click on the thumbs up or down. This will depend on how you've implemented your custom widget, but it will likely involve adding event listeners to the thumbs up and down buttons and updating the state of your widget accordingly. For more examples, you can refer to the Voiceflow extensions demo repository on GitHub.

RomAIxOP•17mo ago

But how do I get a thumbs up if the user clicks thumbs up and vice versa for thumbs down

automatic-azure•17mo ago

There's a piece of code on this in the extensions example github repo from voiceflow:

export const FeedbackExtension = {
  name: 'Feedback',
  type: 'response',
  match: ({ trace }) =>
    trace.type === 'ext_feedback' || trace.payload.name === 'ext_feedback',
  render: ({ trace, element }) => {
    const feedbackContainer = document.createElement('div')

    feedbackContainer.innerHTML = `
          <style>
            .vfrc-feedback {
                display: flex;
                align-items: center;
                justify-content: space-between;
            }

            .vfrc-feedback--description {
                font-size: 0.8em;
                color: grey;
                pointer-events: none;
            }

            .vfrc-feedback--buttons {
                display: flex;
            }

            .vfrc-feedback--button {
                margin: 0;
                padding: 0;
                margin-left: 0px;
                border: none;
                background: none;
                opacity: 0.2;
            }

            .vfrc-feedback--button:hover {
              opacity: 0.5; /* opacity on hover */
            }

            .vfrc-feedback--button.selected {
              opacity: 0.6;
            }

            .vfrc-feedback--button.disabled {
                pointer-events: none;
            }

            .vfrc-feedback--button:first-child svg {
                fill: none; /* color for thumb up */
                stroke: none;
                border: none;
                margin-left: 6px;
            }

            .vfrc-feedback--button:last-child svg {
                margin-left: 4px;
                fill: none; /* color for thumb down */
                stroke: none;
                border: none;
                transform: rotate(180deg);
            }
          </style>
          <div class="vfrc-feedback">
            <div class="vfrc-feedback--description">Was this helpful?</div>
            <div class="vfrc-feedback--buttons">
              <button class="vfrc-feedback--button" data-feedback="1">${SVG_Thumb}</button>
              <button class="vfrc-feedback--button" data-feedback="0">${SVG_Thumb}</button>
            </div>
          </div>
        `

    feedbackContainer
      .querySelectorAll('.vfrc-feedback--button')
      .forEach((button) => {
        button.addEventListener('click', function (event) {
          const feedback = this.getAttribute('data-feedback')
          window.voiceflow.chat.interact({
            type: 'complete',
            payload: { feedback: feedback },
          })

          feedbackContainer
            .querySelectorAll('.vfrc-feedback--button')
            .forEach((btn) => {
              btn.classList.add('disabled')
              if (btn === this) {
                btn.classList.add('selected')
              }
            })
        })
      })

    element.appendChild(feedbackContainer)
  },
}

export const FeedbackExtension = {
  name: 'Feedback',
  type: 'response',
  match: ({ trace }) =>
    trace.type === 'ext_feedback' || trace.payload.name === 'ext_feedback',
  render: ({ trace, element }) => {
    const feedbackContainer = document.createElement('div')

    feedbackContainer.innerHTML = `
          <style>
            .vfrc-feedback {
                display: flex;
                align-items: center;
                justify-content: space-between;
            }

            .vfrc-feedback--description {
                font-size: 0.8em;
                color: grey;
                pointer-events: none;
            }

            .vfrc-feedback--buttons {
                display: flex;
            }

            .vfrc-feedback--button {
                margin: 0;
                padding: 0;
                margin-left: 0px;
                border: none;
                background: none;
                opacity: 0.2;
            }

            .vfrc-feedback--button:hover {
              opacity: 0.5; /* opacity on hover */
            }

            .vfrc-feedback--button.selected {
              opacity: 0.6;
            }

            .vfrc-feedback--button.disabled {
                pointer-events: none;
            }

            .vfrc-feedback--button:first-child svg {
                fill: none; /* color for thumb up */
                stroke: none;
                border: none;
                margin-left: 6px;
            }

            .vfrc-feedback--button:last-child svg {
                margin-left: 4px;
                fill: none; /* color for thumb down */
                stroke: none;
                border: none;
                transform: rotate(180deg);
            }
          </style>
          <div class="vfrc-feedback">
            <div class="vfrc-feedback--description">Was this helpful?</div>
            <div class="vfrc-feedback--buttons">
              <button class="vfrc-feedback--button" data-feedback="1">${SVG_Thumb}</button>
              <button class="vfrc-feedback--button" data-feedback="0">${SVG_Thumb}</button>
            </div>
          </div>
        `

    feedbackContainer
      .querySelectorAll('.vfrc-feedback--button')
      .forEach((button) => {
        button.addEventListener('click', function (event) {
          const feedback = this.getAttribute('data-feedback')
          window.voiceflow.chat.interact({
            type: 'complete',
            payload: { feedback: feedback },
          })

          feedbackContainer
            .querySelectorAll('.vfrc-feedback--button')
            .forEach((btn) => {
              btn.classList.add('disabled')
              if (btn === this) {
                btn.classList.add('selected')
              }
            })
        })
      })

    element.appendChild(feedbackContainer)
  },
}

https://github.com/voiceflow-gallagan/vf-extensions-demo/blob/main/extensions.js

fascinating-indigo•17mo ago

I think what you're trying to say is, how do we retrieve the information when users press the feedback button, is that correct?

RomAIxOP•17mo ago

Yes! I want to set it up in a way that when the users clicks the thumbs up, that I can return a specific response and vice versa for thumbs down

Extension Help: Feedback Thumbs

Did you find this page helpful?