Flex Webchat UI Replace PreEngagment Form Example

App.js

import React from 'react';
import * as FlexWebChat from "@twilio/flex-webchat-ui";
import PreEngagementForm from './PreEngagementForm';

class App extends React.Component {

  state = {};

  constructor(props) {
    super(props);

    const { configuration } = props;
    FlexWebChat.Manager.create(configuration)
      .then(manager => {
        this.setState({ manager })

        /**
         * We replace the PreEngagementCanvas with our own implementation.
         * Make sure your webchat-appConfig.js is configured to render the engagement form,
         * even though we won't use this configuration.
         * */
        FlexWebChat.PreEngagementCanvas.Content.replace(<PreEngagementForm key="pre-engagement-form" />)
      })
      .catch(error => this.setState({ error }));
  }

  render() {
    const { manager, error } = this.state;
    if (manager) {
      return (
        <FlexWebChat.ContextProvider manager={manager}>
          <FlexWebChat.RootContainer />
        </FlexWebChat.ContextProvider>
      );
    }

    if (error) {
      console.error("Failed to initialize Flex Web Chat", error);
    }

    return null;
  }
}

export default App;

PreEngagementForm.js

import React from 'react';
import * as FlexWebChat from "@twilio/flex-webchat-ui";
import { InputLabel } from '@material-ui/core';
import { Input } from '@material-ui/core';

export default class  extends React.Component {
  constructor(props) {
      super(props)
  }
  
  onSubmit(e) {
     e.preventDefault();
    
    // implement your custom validation logic on your fields
    // when validation passes, execute the following
    
    FlexWebChat.Actions.InvokeAction('StartEngagement', { // preEngagementData collected from the form goes here... })
  }

  render() {
    return (
        <>
            <h1>Please give us some details</h1>
            <form onSubmit={ this.onSubmit }>
                <InputLabel style={labelStyles} htmlFor="phone">
                    Phone Number
                    <Input style={inputStyles} type="text" name="phone"/>
                </InputLabel>
            </form>
        </>
    )
  }
}

webchat-appConfig.js

var appConfig = {
    accountSid: "AC..",
    flexFlowSid: "FO..",
    colorTheme: {
        overrides: brandedColors
    },
    startEngagementOnInit: false,
    preEngagementConfig: {    
        description: "Please provide some information",
        fields: [
            {
                label: "What is your name?",
                type: "InputItem",
                attributes: {
                    name: "friendlyName",
                    type: "text",
                    required: true
                }
            },
        ],
        submitLabel: "Ok Let's Go!"
    }
}