Skip to main content

Notifications

Announcements

No record found.

Microsoft Dynamics CRM forum
Unanswered

omnichannel-chat-widget: How can we initiate the chat in LiveChatWidget programmatically?

Posted on by 2
I'm trying to customize the LiveChatWidget [@microsoft/omnichannel-chat-widget](https://github.com/microsoft/omnichannel-chat-widget). But when I add the onSubmit function that is derived from preChatSurveyPaneProps -> controlProps -> onSubmit to validate the input fields of preChatSurveyPane, the liveCHateWidget is not initiating the chat when I click on submit.
 
import { OmnichannelChatSDK } from /@microsoft/omnichannel-chat-sdk/;
import { LiveChatWidget } from /@microsoft/omnichannel-chat-widget/;
import {
  InputValidationPane,
  ChatButton,
  PreChatSurveyPane,
from /@microsoft/omnichannel-chat-components/;
import React, { useEffectuseState } from /react/;
 
const getOmnichannelChatConfig = () => {
  // add your own OC setting, hard-coded just for sample, should be replaced with a better handling
  const omnichannelConfig = {
    orgId: /85007ef2-3740-40f7-99c4-385ec02041ea/// dummy config
    orgUrl:
      https://d74b6a9ace5c43408eb05789f931ca-crm15.omnichannelengagementhub.com/// dummy config
    widgetId: /551b5707-0748-4a63-8eee-7b41bfbd3b95/// dummy config
  };
  return omnichannelConfig;
};
 
const ChatWidgetV1 = () => {
  const [liveChatWidgetPropssetLiveChatWidgetProps] = useState(null);
 
  const init = async () => {
    const omnichannelConfig = getOmnichannelChatConfig();
    const chatSDK = new OmnichannelChatSDK(omnichannelConfig);
    await chatSDK.initialize();
    const chatConfig = await chatSDK.getLiveChatConfig();
 
    const liveChatWidgetProps = {
      styleProps: {
        generalStyles: {
          width: /400px/,
          height: /600px/,
          bottom: /30px/,
          right: /30px/,
        },
      },
      chatSDK,
      chatConfig,
      webChatContainerProps: {
        disableMarkdownMessageFormatting: false//setting the default to true for a known issue with markdown
      },
    };
    setLiveChatWidgetProps(liveChatWidgetProps);
  };
 
  useEffect(() => {
    init();
  }, []);
 
  
 
  return (
    <div>
      {liveChatWidgetProps && (
        <LiveChatWidget
          {...liveChatWidgetProps}
          preChatSurveyPaneProps={{
            controlProps: {
              onSubmit: async (values=> {
                try {
                  console.log(/values/values);
                } catch (error) {
                  console.log(/CustomError/error);
                }
              },
            },
          }}
        ></LiveChatWidget>
      )}
    </div>
  );
};
 
export default ChatWidgetV1;

if i remove the **onSubmit** function from **LiveChatWidget** props that is drived preChatSurveyPaneProps -> controlProps -> onSubmit, click on submit button in **LiveChatWidget** , chat inititated successfully.
 



I want to initiate a new chat when I click on submit button,
when i click on submit, I need to validate the form input values if the values are fine then send these values and initiated a new chat through those values. But i didn't find any solution on how to trigger a new chat in onSubmite function.

Under review

Thank you for your reply! To ensure a great experience for everyone, your content is awaiting approval by our Community Managers. Please check back later.

Helpful resources

Quick Links

Anton Venter – Community Spotlight

Kudos to our October Community Star of the month!

Announcing Our 2024 Season 2 Super Users!

A new season of Super Users has arrived, and we are so grateful for the daily…

Dynamics 365 Community Newsletter - September 2024

Check out the latest community news

Leaderboard

#1
André Arnaud de Calavon Profile Picture

André Arnaud de Cal... 290,558 Super User 2024 Season 2

#2
Martin Dráb Profile Picture

Martin Dráb 228,647 Most Valuable Professional

#3
nmaenpaa Profile Picture

nmaenpaa 101,148

Leaderboard

Featured topics

Product updates

Dynamics 365 release plans