Custom Widgets & Effects (Beta) Feature - Form - Issues

Aaccused-moccasin Hello! So I am testing out the Custom Widget beta feature and integrated a custo...

U

uniform-turquoise•6/21/24, 11:20 PM

Hey man, I have the solution for you. I've just upgraded this forms extension to block user input.

U

uniform-turquoise•6/21/24, 11:20 PM

U

uniform-turquoise•6/21/24, 11:20 PM

export const FormExtension = {
  name: "FormExtension",
  type: "response",
  match: ({ trace }) => trace.type === "ext_form" || trace.payload.name === "ext_form",
  render: ({ trace, element }) => {

    const disableFooterInputs = (isDisabled) => {
      const chatDiv = document.getElementById('voiceflow-chat');
      if (chatDiv) {
        const shadowRoot = chatDiv.shadowRoot;
        if (shadowRoot) {
          const textareas = shadowRoot.querySelectorAll('textarea');
          textareas.forEach(textarea => {
            textarea.disabled = isDisabled;
            textarea.style.backgroundColor = isDisabled ? '#d3d3d3' : '';
            textarea.style.opacity = isDisabled ? '0.5' : '';
            textarea.style.pointerEvents = isDisabled ? 'none' : 'auto';
          });

          const buttons = shadowRoot.querySelectorAll('.c-bXTvXv.c-bXTvXv-lckiv-type-info');
          buttons.forEach(button => {
            button.disabled = isDisabled;
            button.style.pointerEvents = isDisabled ? 'none' : 'auto';
          });
        }
      }
    };

    const formContainer = document.createElement("form");

    formContainer.innerHTML = `
      <style>
        label {
          font-size: 0.8em;
          color: #888;
        }
        input[type="text"], input[type="email"], input[type="tel"] {
          width: 100%;
          border: none;
          border-bottom: 0.5px solid rgba(0, 0, 0, 0.1);
          background: transparent;
          margin: 5px 0;
          outline: none;
        }
        .phone {
          width: 150px;
        }
        .invalid {
          border-color: red;
        }
        .submit {
          background: linear-gradient(to right, #2e6ee1, #2e7ff1 );
          border: none;
          color: white;
          padding: 10px;
          border-radius: 5px;
          width: 100%;
          cursor: pointer;
        }
      </style>

      <label for="name">Name</label>
      <input type="text" class="name" name="name" required><br><br>

      <label for="email">Email</label>
      <input type="email" class="email" name="email" required pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\\.[a-z]{2,}$" title="Invalid email address"><br><br>

      <label for="phone">Phone Number</label>
      <input type="tel" class="phone" name="phone" required pattern="\\d+" title="Invalid phone number, please enter only numbers"><br><br>

      <input type="submit" class="submit" value="Submit">
    `;

    formContainer.addEventListener("submit", function (event) {
      event.preventDefault();

      const name = formContainer.querySelector(".name");
      const email = formContainer.querySelector(".email");
      const phone = formContainer.querySelector(".phone");

      if (!name.checkValidity() || !email.checkValidity() || !phone.checkValidity()) {
        name.classList.add("invalid");
        email.classList.add("invalid");
        phone.classList.add("invalid");
        return;
      }

      formContainer.querySelector(".submit").remove();
      disableFooterInputs(false);

      window.voiceflow.chat.interact({
        type: "complete",
        payload: { name: name.value, email: email.value, phone: phone.value },
      });
    });

    element.appendChild(formContainer);

    disableFooterInputs(true);
  },
};

export const FormExtension = {
  name: "FormExtension",
  type: "response",
  match: ({ trace }) => trace.type === "ext_form" || trace.payload.name === "ext_form",
  render: ({ trace, element }) => {

    const disableFooterInputs = (isDisabled) => {
      const chatDiv = document.getElementById('voiceflow-chat');
      if (chatDiv) {
        const shadowRoot = chatDiv.shadowRoot;
        if (shadowRoot) {
          const textareas = shadowRoot.querySelectorAll('textarea');
          textareas.forEach(textarea => {
            textarea.disabled = isDisabled;
            textarea.style.backgroundColor = isDisabled ? '#d3d3d3' : '';
            textarea.style.opacity = isDisabled ? '0.5' : '';
            textarea.style.pointerEvents = isDisabled ? 'none' : 'auto';
          });

          const buttons = shadowRoot.querySelectorAll('.c-bXTvXv.c-bXTvXv-lckiv-type-info');
          buttons.forEach(button => {
            button.disabled = isDisabled;
            button.style.pointerEvents = isDisabled ? 'none' : 'auto';
          });
        }
      }
    };

    const formContainer = document.createElement("form");

    formContainer.innerHTML = `
      <style>
        label {
          font-size: 0.8em;
          color: #888;
        }
        input[type="text"], input[type="email"], input[type="tel"] {
          width: 100%;
          border: none;
          border-bottom: 0.5px solid rgba(0, 0, 0, 0.1);
          background: transparent;
          margin: 5px 0;
          outline: none;
        }
        .phone {
          width: 150px;
        }
        .invalid {
          border-color: red;
        }
        .submit {
          background: linear-gradient(to right, #2e6ee1, #2e7ff1 );
          border: none;
          color: white;
          padding: 10px;
          border-radius: 5px;
          width: 100%;
          cursor: pointer;
        }
      </style>

      <label for="name">Name</label>
      <input type="text" class="name" name="name" required><br><br>

      <label for="email">Email</label>
      <input type="email" class="email" name="email" required pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\\.[a-z]{2,}$" title="Invalid email address"><br><br>

      <label for="phone">Phone Number</label>
      <input type="tel" class="phone" name="phone" required pattern="\\d+" title="Invalid phone number, please enter only numbers"><br><br>

      <input type="submit" class="submit" value="Submit">
    `;

    formContainer.addEventListener("submit", function (event) {
      event.preventDefault();

      const name = formContainer.querySelector(".name");
      const email = formContainer.querySelector(".email");
      const phone = formContainer.querySelector(".phone");

      if (!name.checkValidity() || !email.checkValidity() || !phone.checkValidity()) {
        name.classList.add("invalid");
        email.classList.add("invalid");
        phone.classList.add("invalid");
        return;
      }

      formContainer.querySelector(".submit").remove();
      disableFooterInputs(false);

      window.voiceflow.chat.interact({
        type: "complete",
        payload: { name: name.value, email: email.value, phone: phone.value },
      });
    });

    element.appendChild(formContainer);

    disableFooterInputs(true);
  },
};

export const FormExtension = {
  name: "FormExtension",
  type: "response",
  match: ({ trace }) => trace.type === "ext_form" || trace.payload.name === "ext_form",
  render: ({ trace, element }) => {

    const disableFooterInputs = (isDisabled) => {
      const chatDiv = document.getElementById('voiceflow-chat');
      if (chatDiv) {
        const shadowRoot = chatDiv.shadowRoot;
        if (shadowRoot) {
          const textareas = shadowRoot.querySelectorAll('textarea');
          textareas.forEach(textarea => {
            textarea.disabled = isDisabled;
            textarea.style.backgroundColor = isDisabled ? '#d3d3d3' : '';
            textarea.style.opacity = isDisabled ? '0.5' : '';
            textarea.style.pointerEvents = isDisabled ? 'none' : 'auto';
          });

          const buttons = shadowRoot.querySelectorAll('.c-bXTvXv.c-bXTvXv-lckiv-type-info');
          buttons.forEach(button => {
            button.disabled = isDisabled;
            button.style.pointerEvents = isDisabled ? 'none' : 'auto';
          });
        }
      }
    };

    const formContainer = document.createElement("form");

    formContainer.innerHTML = `
      <style>
        label {
          font-size: 0.8em;
          color: #888;
        }
        input[type="text"], input[type="email"], input[type="tel"] {
          width: 100%;
          border: none;
          border-bottom: 0.5px solid rgba(0, 0, 0, 0.1);
          background: transparent;
          margin: 5px 0;
          outline: none;
        }
        .phone {
          width: 150px;
        }
        .invalid {
          border-color: red;
        }
        .submit {
          background: linear-gradient(to right, #2e6ee1, #2e7ff1 );
          border: none;
          color: white;
          padding: 10px;
          border-radius: 5px;
          width: 100%;
          cursor: pointer;
        }
      </style>

      <label for="name">Name</label>
      <input type="text" class="name" name="name" required><br><br>

      <label for="email">Email</label>
      <input type="email" class="email" name="email" required pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\\.[a-z]{2,}$" title="Invalid email address"><br><br>

      <label for="phone">Phone Number</label>
      <input type="tel" class="phone" name="phone" required pattern="\\d+" title="Invalid phone number, please enter only numbers"><br><br>

      <input type="submit" class="submit" value="Submit">
    `;

    formContainer.addEventListener("submit", function (event) {
      event.preventDefault();

      const name = formContainer.querySelector(".name");
      const email = formContainer.querySelector(".email");
      const phone = formContainer.querySelector(".phone");

      if (!name.checkValidity() || !email.checkValidity() || !phone.checkValidity()) {
        name.classList.add("invalid");
        email.classList.add("invalid");
        phone.classList.add("invalid");
        return;
      }

      formContainer.querySelector(".submit").remove();
      disableFooterInputs(false);

      window.voiceflow.chat.interact({
        type: "complete",
        payload: { name: name.value, email: email.value, phone: phone.value },
      });
    });

    element.appendChild(formContainer);

    disableFooterInputs(true);
  },
};

export const FormExtension = {
  name: "FormExtension",
  type: "response",
  match: ({ trace }) => trace.type === "ext_form" || trace.payload.name === "ext_form",
  render: ({ trace, element }) => {

    const disableFooterInputs = (isDisabled) => {
      const chatDiv = document.getElementById('voiceflow-chat');
      if (chatDiv) {
        const shadowRoot = chatDiv.shadowRoot;
        if (shadowRoot) {
          const textareas = shadowRoot.querySelectorAll('textarea');
          textareas.forEach(textarea => {
            textarea.disabled = isDisabled;
            textarea.style.backgroundColor = isDisabled ? '#d3d3d3' : '';
            textarea.style.opacity = isDisabled ? '0.5' : '';
            textarea.style.pointerEvents = isDisabled ? 'none' : 'auto';
          });

          const buttons = shadowRoot.querySelectorAll('.c-bXTvXv.c-bXTvXv-lckiv-type-info');
          buttons.forEach(button => {
            button.disabled = isDisabled;
            button.style.pointerEvents = isDisabled ? 'none' : 'auto';
          });
        }
      }
    };

    const formContainer = document.createElement("form");

    formContainer.innerHTML = `
      <style>
        label {
          font-size: 0.8em;
          color: #888;
        }
        input[type="text"], input[type="email"], input[type="tel"] {
          width: 100%;
          border: none;
          border-bottom: 0.5px solid rgba(0, 0, 0, 0.1);
          background: transparent;
          margin: 5px 0;
          outline: none;
        }
        .phone {
          width: 150px;
        }
        .invalid {
          border-color: red;
        }
        .submit {
          background: linear-gradient(to right, #2e6ee1, #2e7ff1 );
          border: none;
          color: white;
          padding: 10px;
          border-radius: 5px;
          width: 100%;
          cursor: pointer;
        }
      </style>

      <label for="name">Name</label>
      <input type="text" class="name" name="name" required><br><br>

      <label for="email">Email</label>
      <input type="email" class="email" name="email" required pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\\.[a-z]{2,}$" title="Invalid email address"><br><br>

      <label for="phone">Phone Number</label>
      <input type="tel" class="phone" name="phone" required pattern="\\d+" title="Invalid phone number, please enter only numbers"><br><br>

      <input type="submit" class="submit" value="Submit">
    `;

    formContainer.addEventListener("submit", function (event) {
      event.preventDefault();

      const name = formContainer.querySelector(".name");
      const email = formContainer.querySelector(".email");
      const phone = formContainer.querySelector(".phone");

      if (!name.checkValidity() || !email.checkValidity() || !phone.checkValidity()) {
        name.classList.add("invalid");
        email.classList.add("invalid");
        phone.classList.add("invalid");
        return;
      }

      formContainer.querySelector(".submit").remove();
      disableFooterInputs(false);

      window.voiceflow.chat.interact({
        type: "complete",
        payload: { name: name.value, email: email.value, phone: phone.value },
      });
    });

    element.appendChild(formContainer);

    disableFooterInputs(true);
  },
};

U

uniform-turquoise•6/21/24, 11:21 PM

To retrieve the information on canvas, you need to set a JavaScript step with

name = last_event.payload.name

name = last_event.payload.name

name = last_event.payload.name

name = last_event.payload.name

(remember to create a variable).

U

uniform-turquoise•6/21/24, 11:22 PM

Also, I highly recommend you check out this vf.file as it contains a lot of examples of extensions.

https://github.com/voiceflow-gallagan/vf-extensions-demo/blob/main/Chat_Widget_Extensions_DEMO-2024-03-07_01-11.vf

Uuniform-turquoise ``` export const FormExtension = { name: "FormExtension", type: "response", ...

C

crooked-brown•6/22/24, 4:03 PM

This is the form extension?

C

crooked-brown•6/22/24, 4:03 PM

@randompenna Can you show me the flow you used to do that

C

crooked-brown•6/22/24, 4:04 PM

Been trying to figure that out

U

uniform-turquoise•6/22/24, 4:07 PM

You can download this template to better understand everything. There’s also a repo for that

Chat_Widget_Extensions_DEMO-2024-03-07_01-11.vf187.84KB

U

uniform-turquoise•6/22/24, 4:07 PM

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

Ccrooked-brown This is the form extension?

U

uniform-turquoise•6/22/24, 4:07 PM

Yeah

Uuniform-turquoise You can download this template to better understand everything. There’s also a r...

C

crooked-brown•6/22/24, 4:07 PM

Thanks

C

crooked-brown•6/22/24, 4:07 PM

Have you also figured out the other extensions?

C

crooked-brown•6/22/24, 4:07 PM

Like confetti and such

C

crooked-brown•6/22/24, 4:08 PM

Well actually have you figure out the Map extension @randompenna

U

uniform-turquoise•6/22/24, 4:10 PM

Yeah, I have all the extensions hosted here https://cdn.jsdelivr.net/gh/RandomPenna/voiceflow@main/customextensions.js

Uuniform-turquoise Yeah, I have all the extensions hosted here https://cdn.jsdelivr.net/gh/RandomPe...

C

crooked-brown•6/22/24, 4:12 PM

how do I differentiate them

C

crooked-brown•6/22/24, 4:12 PM

and how exactly do I execute a function from a custom action

U

uniform-turquoise•6/22/24, 4:13 PM

You need to name your custom action with the trace type of your extension
trace.type === "ext_multiselect"

U

uniform-turquoise•6/22/24, 4:13 PM

ext_multiselect in the custom action

U

uniform-turquoise•6/22/24, 4:13 PM

C

crooked-brown•6/22/24, 4:14 PM

ah i see