​
Overview

ChatDash now supports Voiceflow extensions, allowing you to enhance your chatbot’s functionality by integrating custom extensions developed in Voiceflow. This integration enables you to create richer and more interactive experiences for your users without the need to manage additional data sources or complexity.

Both response and effect types of extensions are supported in ChatDash.

​
What are Voiceflow Extensions?

Voiceflow extensions are custom functionalities that can be added to your Voiceflow projects to extend their capabilities. They enable you to create interactive components like forms, maps, videos, timers, and more within your chat or voice applications.

According to the Voiceflow documentation, there are two types of extensions:

  • Response Extensions: These extensions render custom components in the chat interface, allowing for richer user interactions.
  • Effect Extensions: These extensions execute side effects or actions, such as modifying the chat UI or triggering events, without directly rendering content in the chat window.

​
Benefits of Using Voiceflow Extensions in ChatDash

  • Enhanced Functionality: Add custom interactive components to your chatbots.
  • Seamless Integration: Easily integrate extensions without additional storage or data management.
  • Customizable: Build your own custom extensions to fit your specific use cases and requirements.
  • Time Savings: Reduce development time by leveraging pre-built extensions.

​
How to Use Voiceflow Extensions in ChatDash

​
Step 1: Initialize the Chat Widget with Extensions

When embedding the ChatDash widget into your webpage, include the extensions parameter directly in the chat widget configuration, similar to how it’s done in Voiceflow’s documentation.

Example:

    <script type="module">
        (function() {
            if (window.chatWidgetScriptLoaded) return;

            window.ChatWidgetConfig = {
                projectId: "YOUR_PROJECT_ID",
                extensions: [extension1, extension2, extension3, ...] // You should somehow import your extensions above.
            };

            var chatWidgetScript = document.createElement("script");
            chatWidgetScript.type = 'text/javascript';
            chatWidgetScript.src = "https://storage.googleapis.com/cdwidget/dist/assets/js/main.js";
            document.body.appendChild(chatWidgetScript);

            window.chatWidgetScriptLoaded = true;
        })();
    </script>

Replace "YOUR_PROJECT_ID" with your actual project ID. By including the extensions array directly in the ChatWidgetConfig, you can manage your extensions without needing to include external scripts.

​
Step 2: Build Your Own Custom Extensions

You can build your own custom extensions to tailor the chatbot experience to your specific needs. ChatDash provides a helper function createExtensionComponent to simplify the creation of custom response extensions.

​
Using createExtensionComponent

The createExtensionComponent function helps you create a React component for your custom extension.

You MUST use this function to create any voiceflow extension

Function Definition:

const createExtensionComponent = (renderFunc) => {
  return class ExtensionComponent extends React.Component {
    constructor(props) {
      super(props);
      this.elementRef = React.createRef();
      this.cleanupFunction = null;
    }

    componentDidMount() {
      this.renderExtension();
    }

    componentDidUpdate(prevProps) {
      if (prevProps.isExecuted !== this.props.isExecuted) {
        this.renderExtension();
      }
    }

    componentWillUnmount() {
      if (typeof this.cleanupFunction === 'function') {
        this.cleanupFunction();
      }
    }

    renderExtension() {
      if (this.elementRef.current) {
        if (this.cleanupFunction) {
          this.cleanupFunction();
        }
        this.cleanupFunction = renderFunc(
          this.props.message,
          this.props.handlePathForExtension,
          this.elementRef.current,
          this.props.isExecuted
        );
      }
    }

    shouldComponentUpdate(nextProps) {
      return (
        nextProps.message !== this.props.message ||
        nextProps.isExecuted !== this.props.isExecuted
      );
    }

    render() {
      return React.createElement('div', { ref: this.elementRef });
    }
  };
};

This function simplifies the process of creating a React component that handles the rendering and lifecycle of your custom extension.

Usage Example:

{
  type: 'extension',
  extensionType: 'response', // or 'effect'
  name: 'CustomExtension',
  match: (message) => message.type === 'ext_custom',
  component: createExtensionComponent((message, handlePathForExtension, element) => {
    // Your custom rendering logic here
  }),
}

​
Pre-Built Extensions

ChatDash supports a variety of pre-built extensions, including but not limited to:

  • Disable Input (Effect Extension)
  • Forms (Response Extension)
  • Maps (Response Extension)
  • Videos (Response Extension)
  • Timers (Response Extension)
  • Confetti (Effect Extension)
  • Feedback (Response Extension)
  • File Upload (Response Extension)
  • Knowledge Base Upload (Response Extension)
  • Date Picker (Response Extension)
  • Placeholder Text (Effect Extension)

​
Extension Examples

​
Response Extensions

​
Form Extension

The Form extension allows you to collect user input through a custom form.

Usage:

Send a message with type set to 'ext_form' to display a form asking for the user’s name, email, and phone number.

Code Example:

{
  type: 'extension',
  extensionType: 'response',
  name: 'Forms',
  match: (message) =>
    message.type === 'ext_form' || message?.payload?.name === 'ext_form',
  component: createExtensionComponent(
    (message, handlePathForExtension, element) => {
      const formHtml = `
        <form id="extension-form">
          <label for="name">Name</label>
          <input type="text" id="name" name="name" required />
          
          <label for="email">Email</label>
          <input type="email" id="email" name="email" required />
          
          <label for="phone">Phone Number</label>
          <input type="tel" id="phone" name="phone" required />
          
          <button type="submit">Submit</button>
        </form>
      `;
      element.innerHTML = formHtml;

      const form = element.querySelector('#extension-form');
      form.addEventListener('submit', (event) => {
        event.preventDefault();
        const name = form.elements.name.value;
        const email = form.elements.email.value;
        const phone = form.elements.phone.value;
        handlePathForExtension({
          type: 'complete',
          payload: { name, email, phone },
        });
      });
    }
  ),
}

​
Map Extension

The Map extension embeds a Google Map with directions.

Usage:

Send a message with type set to 'ext_map' and include apiKey, origin, and destination in the payload.

Code Example:

{
  type: 'extension',
  extensionType: 'response',
  name: 'Maps',
  match: (message) =>
    message.type === 'ext_map' || message?.payload?.name === 'ext_map',
  component: createExtensionComponent(
    (message, handlePathForExtension, element) => {
      const { apiKey, origin, destination, zoom, height, width } =
        message.payload;
      const mapHtml = `
        <iframe
          width="${width || '240'}"
          height="${height || '240'}"
          style="border: 0;"
          loading="lazy"
          allowfullscreen
          src="https://www.google.com/maps/embed/v1/directions?key=${apiKey}&origin=${origin}&destination=${destination}&zoom=${zoom}"
        ></iframe>
      `;
      element.innerHTML = mapHtml;
    }
  ),
}

​
Feedback Extension

The Feedback extension allows users to provide feedback on the chatbot’s response.

Usage:

Send a message with type set to 'ext_feedback' to prompt the user for feedback.

Code Example:

{
  type: 'extension',
  extensionType: 'response',
  name: 'Feedback',
  match: (message) =>
    message.type === 'ext_feedback' || message?.payload?.name === 'ext_feedback',
  component: createExtensionComponent(
    (message, handlePathForExtension, element, isExecuted) => {
      const feedbackHtml = `
        <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">
              <span>${SVG_Thumb}</span>
            </button>
            <button class="vfrc-feedback--button" data-feedback="0" style="display: inline-block; transform: rotate(180deg)">
              <span>${SVG_Thumb}</span>
            </button>
          </div>
        </div>
      `;
      element.innerHTML = feedbackHtml;

      const buttons = element.querySelectorAll('.vfrc-feedback--button');
      if (isExecuted) {
        buttons.forEach((btn) => (btn.disabled = true));
      } else {
        buttons.forEach((button) => {
          button.addEventListener('click', () => {
            if (isExecuted) return;
            const feedback = button.dataset.feedback;
            buttons.forEach((btn) => (btn.disabled = true));
            button.classList.add('selected');
            handlePathForExtension({
              type: 'complete',
              payload: { feedback },
            });
          });
        });
      }
    }
  ),
}

​
Effect Extensions

​
Confetti Extension

The Confetti extension triggers a confetti animation on the page.

Usage:

Send a message with type set to 'ext_confetti' to display confetti.

Code Example:

{
  type: 'extension',
  extensionType: 'effect',
  name: 'Confetti',
  match: (message) =>
    message.type === 'ext_confetti' || message?.payload?.name === 'ext_confetti',
  effect: () => {
    const canvas = document.querySelector('#confetti-canvas');
    var myConfetti = confetti.create(canvas, {
      resize: true,
      useWorker: true,
    });

    myConfetti({
      particleCount: 200,
      spread: 160,
    });
  },
}

​
Placeholder Extension

The Placeholder extension allows you to modify the placeholder text of the chat input field.

Usage:

Send a message with type set to 'ext_placeholder' and include the desired placeholder text in the payload.

Code Example:

{
  type: 'extension',
  extensionType: 'effect',
  name: 'Placeholder',
  match: (message) =>
    message.type === 'ext_placeholder' || message?.payload?.name === 'ext_placeholder',
  effect: (message) => {
    const chatDiv = document.getElementById("cd-widget");
    const shadowRoot = chatDiv.shadowRoot;
    const inputField = shadowRoot.querySelector(".cd-widget-text-input input");
    inputField.placeholder = message.payload.placeholder;
  },
}

​
Embed Code Example

Below is an example of how to embed the ChatDash widget with Voiceflow extensions into your webpage:


</head>
<body>
  <div id="cd-widget"></div>
  <canvas id="confetti-canvas"></canvas>

  <!-- Include React and Confetti Libraries -->
  <script src="https://unpkg.com/react/umd/react.development.js"></script>
  <script src="https://unpkg.com/react-dom/umd/react-dom.development.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/canvas-confetti@1.5.1/dist/confetti.browser.min.js"></script>

  <!-- Initialize ChatDash Widget with Extensions -->
  <script>
    (function() {
      window.ChatWidgetConfig = {
        projectId: "YOUR_PROJECT_ID",
        extensions: [
          // Include your extensions here
          {
            type: 'extension',
            extensionType: 'effect',
            name: 'Confetti',
            match: (message) =>
              message.type === 'ext_confetti' || message?.payload?.name === 'ext_confetti',
            effect: () => {
              const canvas = document.querySelector('#confetti-canvas');
              var myConfetti = confetti.create(canvas, {
                resize: true,
                useWorker: true,
              });

              myConfetti({
                particleCount: 200,
                spread: 160,
              });
            },
          },
          // Add more extensions as needed
        ],
      };

      var chatWidgetScript = document.createElement("script");
      chatWidgetScript.type = "text/javascript";
      chatWidgetScript.src = "https://storage.googleapis.com/cdwidget/dist/assets/js/main.js";
      document.body.appendChild(chatWidgetScript);
    })();
  </script>

  <button onclick="openChat()">Open Chat</button>
</body>
</html>

Replace "YOUR_PROJECT_ID" with your actual project ID. Include your custom extensions directly in the extensions array within the ChatWidgetConfig object.

​
Conclusion

By integrating Voiceflow extensions into ChatDash, you can significantly enhance the capabilities of your chatbot, providing users with a more interactive and engaging experience. You can use the provided extensions or build your own custom extensions to fit your unique requirements.

For more information on creating custom extensions, refer to the Voiceflow Custom Web Chat Widgets documentation.

For further assistance or questions, please contact our support team.

Knowledge Base TagsEdit Assistant