इंटरैक्टिव डायलॉग खोलना

इस पेज पर बताया गया है कि Chat ऐप्लिकेशन में डायलॉग कैसे खोले जा सकते हैं का इस्तेमाल किया जा सकता है.

डायलॉग, विंडो वाले कार्ड होते हैं. ये कार्ड पर आधारित इंटरफ़ेस होते हैं जो किसी चैट स्पेस या मैसेज से खुलते हैं. डायलॉग और उसके कॉन्टेंट सिर्फ़ उस उपयोगकर्ता को दिखेगा जिसने इसे खोला है.

चैट ऐप्लिकेशन, डायलॉग बॉक्स का इस्तेमाल करके, इनसे जानकारी इकट्ठा कर सकते हैं और उसका अनुरोध कर सकते हैं चैट करने वाले उपयोगकर्ता और कई चरणों वाले फ़ॉर्म का इस्तेमाल करना. ज़्यादा जानकारी के लिए फ़ॉर्म के इनपुट बनाने के बारे में ज़्यादा जानने के लिए, उपयोगकर्ताओं से जानकारी इकट्ठा करना और उसे प्रोसेस करना लेख पढ़ें.

ज़्यादा उदाहरणों के लिए, Google Chat ऐप्लिकेशन के सैंपल देखें.

ज़रूरी शर्तें

Node.js

• Google Chat ऐप्लिकेशन, जिसमें इंटरैक्टिव सुविधाएं चालू हैं. बनाने के लिए इंटरैक्टिव चैट ऐप्लिकेशन के लिए एचटीटीपी सेवा का इस्तेमाल करें. इस क्विकस्टार्ट को पूरा करें.

Python

• Google Chat ऐप्लिकेशन, जिसमें इंटरैक्टिव सुविधाएं चालू हैं. बनाने के लिए इंटरैक्टिव चैट ऐप्लिकेशन के लिए एचटीटीपी सेवा का इस्तेमाल करें. इस क्विकस्टार्ट को पूरा करें.

Apps Script

• Google Chat ऐप्लिकेशन, जिसमें इंटरैक्टिव सुविधाएं चालू हैं. बनाने के लिए Apps Script में इंटरैक्टिव चैट ऐप्लिकेशन के साथ, इस क्विकस्टार्ट की प्रोसेस को पूरा करें.

कोई डायलॉग खोलें

पहली इमेज: संपर्क जानकारी इकट्ठा करने वाला डायलॉग बॉक्स.

इस सेक्शन में, जवाब देने और डायलॉग बॉक्स सेट अप करने के बारे में बताया गया है. इसके लिए, ये तरीके अपनाएं:

1. उपयोगकर्ता इंटरैक्शन से डायलॉग अनुरोध ट्रिगर करें.
2. वापस आकर डायलॉग बॉक्स खोलकर, अनुरोध पर कार्रवाई करें.
3. जब उपयोगकर्ता जानकारी सबमिट कर दे, तब उसे बंद करके या कोई अन्य डायलॉग दिखाएँ.

डायलॉग अनुरोध को ट्रिगर करना

Chat ऐप्लिकेशन, किसी उपयोगकर्ता को जवाब देने के लिए ही डायलॉग खोल सकता है इंटरैक्शन, जैसे कि स्लैश कमांड या कार्ड में किसी मैसेज से बटन क्लिक करना.

उपयोगकर्ताओं को डायलॉग का जवाब देने के लिए, Chat ऐप्लिकेशन को एक ऐसा इंटरैक्शन बनाएं जो डायलॉग अनुरोध को ट्रिगर करता हो, जैसे कि:

• स्लैश कमांड का जवाब दें. स्लैश कमांड से अनुरोध को ट्रिगर करने के लिए, कमांड को कॉन्फ़िगर करते समय, आपको एक डायलॉग बॉक्स खुलता है चेकबॉक्स को चुनना होगा.
• बटन पर होने वाले क्लिक का जवाब देने के लिए मैसेज, किसी कार्ड के हिस्से के रूप में या मैसेज के निचले हिस्से में. ट्रिगर करने के लिए बटन से अनुरोध देखते हैं, तो आप बटन का onClick कार्रवाई के लिए, interaction को OPEN_DIALOG पर सेट करें.
• Chat ऐप्लिकेशन के होम पेज पर, किसी बटन पर क्लिक करने पर उसका जवाब देना. होम पेजों से डायलॉग खोलने के बारे में जानने के लिए, यहां जाएं Google Chat ऐप्लिकेशन का होम पेज बनाएं.

दूसरी इमेज: Chat ऐप्लिकेशन एक मैसेज भेजता है, जिसमें उपयोगकर्ताओं से /addContact स्लैश कमांड का इस्तेमाल करने के लिए कहा जाता है.
मैसेज में एक बटन भी होता है, जिस पर क्लिक करके उपयोगकर्ता निर्देश ट्रिगर कर सकते हैं.

नीचे दिया गया JSON, किसी बटन से डायलॉग अनुरोध को ट्रिगर करने का तरीका बताता है कार्ड मैसेज. डायलॉग खोलने के लिए, button.interaction फ़ील्ड को OPEN_DIALOG पर सेट किया गया है:

{
  "buttonList": { "buttons": [{
    "text": "BUTTON_TEXT",
    "onClick": { "action": {
      "function": "FUNCTION_NAME",
      "interaction": "OPEN_DIALOG"
    }}
  }]}
}

जहां BUTTON_TEXT, बटन में दिखने वाला टेक्स्ट है और FUNCTION_NAME एक ऐसा फ़ंक्शन है जो शुरुआती डायलॉग.

शुरुआती डायलॉग खोलें

जब कोई उपयोगकर्ता डायलॉग का अनुरोध ट्रिगर करता है, तो आपका Chat ऐप्लिकेशन एक इंटरैक्शन इवेंट मिलता है. इसे event Chat API. अगर इंटरैक्शन कोई डायलॉग अनुरोध ट्रिगर करता है, तो इवेंट dialogEventType फ़ील्ड को REQUEST_DIALOG पर सेट किया गया है.

डायलॉग बॉक्स खोलने के लिए, आपका Chat ऐप्लिकेशन वापस करके अनुरोध भेजें actionResponse ऑब्जेक्ट जिनमें type है और जिसे DIALOG पर सेट किया गया है Message ऑब्जेक्ट है. डायलॉग के कॉन्टेंट के बारे में बताने के लिए, ये चीज़ें शामिल करें ऑब्जेक्ट:

• actionResponse ऑब्जेक्ट है, जिसका type DIALOG पर सेट है.
• dialogAction ऑब्जेक्ट है. body फ़ील्ड में यूज़र इंटरफ़ेस (यूआई) एलिमेंट होते हैं, जो कार्ड में एक या उससे ज़्यादा डिसप्ले शामिल हैं sections विजेट. उपयोगकर्ताओं से जानकारी एकत्रित करने के लिए, आप फ़ॉर्म इनपुट विजेट और बटन विजेट. फ़ॉर्म इनपुट को डिज़ाइन करने के बारे में ज़्यादा जानने के लिए, यह देखें उपयोगकर्ताओं से जानकारी इकट्ठा करना और उसे प्रोसेस करना.

इस JSON में दिखाया गया है कि Chat ऐप्लिकेशन, वापस कैसे आता है इस जवाब में एक डायलॉग बॉक्स खुलता है:

{ "actionResponse": {
  "type": "DIALOG",
  "dialogAction": { "dialog": { "body": { "sections": [{
    "widgets": [{
      WIDGETS,
      { "buttonList": { "buttons": [{
        "text": "BUTTON_TEXT",
        "onClick": {
          "action": {"function": "FUNCTION_NAME"}
        }
      }]}}
    }]
  }]}}}
}}

जहां BUTTON_TEXT, बटन में दिखने वाला टेक्स्ट है (जैसे कि Next या Submit), WIDGETS एक या उससे ज़्यादा दिखाता है फ़ॉर्म इनपुट विजेट, और FUNCTION_NAME एक ऐसा फ़ंक्शन है जो तब काम करता है, जब उपयोगकर्ता किसी बटन पर क्लिक करते हैं.

डायलॉग सबमिट करने की प्रोसेस को मैनेज करें

जब उपयोगकर्ता डायलॉग सबमिट करने वाले बटन पर क्लिक करते हैं, तो आपके Chat ऐप्लिकेशन को मिले CARD_CLICKED इंटरैक्शन वह इवेंट जिसमें dialogEventType SUBMIT_DIALOG है.

Chat ऐप्लिकेशन को इस दौरान इंटरैक्शन इवेंट मैनेज करना होगा इनमें से कोई एक काम करें:

• दूसरे कार्ड की जानकारी अपने-आप भरने के लिए, दूसरा डायलॉग दिखाएं फ़ॉर्म का इस्तेमाल करें.
• उपयोगकर्ता के सबमिट किए गए डेटा की पुष्टि करने के बाद, डायलॉग बॉक्स बंद कर दें. विकल्प के तौर पर, पुष्टि करने वाला मैसेज भेजें.

ज़रूरी नहीं: कोई दूसरा डायलॉग दिखाएं

जब उपयोगकर्ता शुरुआती डायलॉग सबमिट कर देंगे, तब Chat ऐप्लिकेशन ये काम कर सकेंगे पहले, जानकारी की समीक्षा करने में उपयोगकर्ताओं की मदद करने के लिए, एक या एक से ज़्यादा डायलॉग दिखाएं कई चरणों वाले फ़ॉर्म को सबमिट करना, उन्हें पूरा करना या फ़ॉर्म के कॉन्टेंट को डाइनैमिक तरीके से भरना.

शुरुआती डायलॉग से उपयोगकर्ता जो भी डेटा इनपुट करते हैं उसे लोड करने के लिए, आपको जोड़ना होगा पैरामीटर को उस बटन पर ले जाते हैं जिससे अगला डायलॉग बॉक्स खुलता है या ओरिजनल डायलॉग को पास किया जाता है शुरुआती डायलॉग से CARD_CLICKED इंटरैक्शन इवेंट. जानकारी के लिए, यह देखें किसी दूसरे कार्ड में डेटा ट्रांसफ़र करें.

इस उदाहरण में, कोई Chat ऐप्लिकेशन एक डायलॉग बॉक्स खोलता है सबमिट करने से पहले, दूसरा डायलॉग दिखाता है. इनपुट डेटा लोड करने के लिए, Chat ऐप्लिकेशन, CARD_CLICKED इंटरैक्शन इवेंट को पास कर लेता है इस फ़ंक्शन के लिए पैरामीटर के तौर पर:

Node.js

यह सैंपल, Google Cloud Function के तौर पर चलता है.

// Respond to button clicks on attached cards
if (event.type === "CARD_CLICKED") {

  // Open the first dialog.
  if (event.common.invokedFunction === "openDialog") {
    openDialog(event);
  }

  // Open the second dialog.
  if (event.common.invokedFunction === "openNextDialog") {
    openNextDialog(event);
  }
}

/**
* Opens and starts a dialog that lets users add details about a contact.
*
* @param {object} event the event object from Google Chat.
*
* @return {object} open a dialog.
*/
function openDialog(event) {
  res.json({ "actionResponse": {
    "type": "DIALOG",
    "dialogAction": { "dialog": { "body": { "sections": [{ "widgets": [
      WIDGETS,
      { "buttonList": { "buttons": [{
        "text": "Next",
        "onClick": { "action": {
          "function": "openNextDialog"
        }}
      }]}}
    ]}]}}}
  }});
};

/**
* Opens a second dialog that lets users add more contact details.
*
* @param {object} event the event object from Google Chat.
*
* @return {object} open a dialog.
*/
function openNextDialog(event) {
  res.json({ "actionResponse": {
    "type": "DIALOG",
    "dialogAction": { "dialog": { "body": { "sections": [{ "widgets": [
      WIDGETS,
      {
        "horizontalAlignment": "END",
        "buttonList": { "buttons": [{
          "text": "Submit",
          "onClick": { "action": {
            "function": "submitDialog"
          }}
        }]}
      }
    ]}]}}}
  }});
}

Python

यह सैंपल, Google Cloud Function के तौर पर चलता है.

from typing import Any, Mapping

import flask
import functions_framework

@functions_framework.http
def main(req: flask.Request) -> Mapping[str, Any]:
  """Responds to a MESSAGE event in Google Chat that includes the /createContact
     slash command by opening a dialog.

  Args:
      req (flask.Request): the event object from Chat API.

  Returns:
      Mapping[str, Any]: open a Dialog in response to a card's button click.
  """

  if req.method == 'GET':
    return 'Sorry, this function must be called from a Google Chat.'

  request = req.get_json(silent=True)

  if request.get('type') == 'CARD_CLICKED':
    if invoked_function := request.get('common', dict()).get('invokedFunction'):
      if invoked_function == 'open_dialog':
        return open_dialog(request)

      elif invoked_function == 'open_next_dialog':
        return open_dialog(request)

def open_dialog(request: Mapping[str, Any]) -> Mapping[str, Any]:
  """Opens a dialog in Google Chat.

  Args:
      request (Mapping[str, Any]): the event object from Chat API.

  Returns:
      Mapping[str, Any]: open a Dialog in response to a card's button click.
  """
  return { "actionResponse": {
    "type": "DIALOG",
    "dialogAction": { "dialog": { "body": { "sections": [{ "widgets": [
      WIDGETS,
      { "buttonList": { "buttons": [{
        "text": "Next",
        "onClick": { "action": {
          "function": "open_next_dialog"
        }}
      }]}}
    ]}]}}}
  }}

def open_next_dialog(request: Mapping[str, Any]) -> Mapping[str, Any]:
  """Opens a second dialog that lets users add more contact details.

  Args:
      request (Mapping[str, Any]): the event object from Chat API.

  Returns:
      Mapping[str, Any]: open a Dialog in response to a card's button click.
  """
  return { "actionResponse": {
    "type": "DIALOG",
    "dialogAction": { "dialog": { "body": { "sections": [{ "widgets": [
      WIDGETS,
      {
        "horizontalAlignment": "END",
        "buttonList": { "buttons": [{
          "text": "Submit",
          "onClick": { "action": {
            "function": "submit_dialog"
          }}
        }]}
      }
    ]}]}}}
  }}

Apps Script

यह उदाहरण वापस लौटकर एक कार्ड संदेश भेजता है card JSON. Google आपके यूआरएल पैरामीटर को कैसे इस्तेमाल करेगा, यह तय करने के लिए Apps Script कार्ड सेवा.

/**
* Responds to a CARD_CLICKED event in Google Chat.
*
* @param {Object} event the event object from Google Chat
*/
function onCardClick(event) {

  // When a user clicks a card, the Chat app checks to see which function to run.
  if (event.common.invokedFunction === "openDialog") {
    return openDialog(event);
  }

  if (event.common.invokedFunction === "openNextDialog") {
    return openNextDialog(event);
  }
}

/**
* Opens and starts a dialog that lets users add details about a contact.
*
* @param {object} event the event object from Google Chat.
*
* @return {object} open a dialog.
*/
function openDialog(event) {
  return { "actionResponse": {
    "type": "DIALOG",
    "dialogAction": { "dialog": { "body": { "sections": [{ "widgets": [
      WIDGETS,
      { "buttonList": { "buttons": [{
        "text": "Next",
        "onClick": { "action": {
          "function": "openNextDialog"
        }}
      }]}}
    ]}]}}}
  }};
}

/**
* Opens a second dialog that lets users add more contact details.
*
* @param {object} event the event object from Google Chat.
*
* @return {object} open a dialog.
*/
function openNextDialog(event) {
  return { "actionResponse": {
    "type": "DIALOG",
    "dialogAction": { "dialog": { "body": { "sections": [{ "widgets": [
      WIDGETS,
      {
        "horizontalAlignment": "END",
        "buttonList": { "buttons": [{
          "text": "Submit",
          "onClick": { "action": {
            "function": "submitDialog"
          }}
        }]}
      }
    ]}]}}}
  }};
}

जहां WIDGETS, एक या उससे ज़्यादा दिखाता है फ़ॉर्म इनपुट विजेट.

डायलॉग बंद करें

जब उपयोगकर्ता किसी डायलॉग में किसी बटन पर क्लिक करते हैं, तो आपके चैट ऐप्लिकेशन को नीचे दी गई जानकारी:

• eventType CARD_CLICKED है.
• dialogEventType SUBMIT_DIALOG है.
• common.formInputs इसमें ऐसा कोई भी डेटा शामिल होता है जिसे उपयोगकर्ता विजेट का इस्तेमाल करके डालते हैं.

नीचे दिए गए सेक्शन में बताया गया है कि उपयोगकर्ता डाले गए डेटा की पुष्टि कैसे करें और उस डायलॉग को बंद करें.

उपयोगकर्ता के इनपुट डेटा की पुष्टि करें और डायलॉग बंद करें

उपयोगकर्ता जो डेटा डालते हैं उसे प्रोसेस करने के लिए, Chat ऐप्लिकेशन का इस्तेमाल करता है event.common.formInputs ऑब्जेक्ट है. इनपुट विजेट से वैल्यू पाने के बारे में ज़्यादा जानने के लिए, यह देखें उपयोगकर्ताओं से जानकारी इकट्ठा करना और उसे प्रोसेस करना.

अगर उपयोगकर्ता किसी ज़रूरी फ़ील्ड को छोड़ देता है या गलत वैल्यू डालता है, तो चैट ऐप्लिकेशन, किसी गड़बड़ी के साथ जवाब दे सकता है. इसके लिए, ActionResponse जिसमें "actionStatus": "ERROR MESSAGE" है.

नीचे दिए गए उदाहरण में इस बात की जांच की गई है कि उपयोगकर्ता ने उस विजेट के लिए एक वैल्यू डाली है या नहीं स्ट्रिंग (stringInputs) स्वीकार करता है, जैसे कि textInput विजेट. अगर यह नहीं है, तो Chat ऐप्लिकेशन, गड़बड़ी का मैसेज दिखाता है. अगर मौजूद हो, Chat ऐप्लिकेशन, डायलॉग सबमिट किए जाने को स्वीकार करता है और डायलॉग बॉक्स को बंद करता है:

Node.js

यह सैंपल, Google Cloud Function के तौर पर चलता है.

/**
* Checks for a form input error, the absence of
* a "name" value, and returns an error if absent.
* Otherwise, confirms successful receipt of a dialog.
*
* Confirms successful receipt of a dialog.
*
* @param {Object} event the event object from Chat API.
*
* @return {Object} open a Dialog in Google Chat.
*/
function submitDialog(event) {

  // Checks to make sure the user entered a value
  // in a dialog. If no value detected, returns
  // an error message. Any "actionStatus" value other than "OK"
  // gets returned as an error.
  if (event.common.formInputs.WIDGET_NAME.stringInputs.value[0] === "") {
    res.json({
      "actionResponse": {
        "type": "DIALOG",
        "dialogAction": {
          "actionStatus": "ERROR_MESSAGE"
        }
      }
    });

    // Otherwise the Chat app indicates that it received
    // form data from the dialog. An "actionStatus" of "OK" is
    // interpreted as code 200, and the dialog closes.
  } else {
    res.json({
      "actionResponse": {
        "type": "DIALOG",
        "dialogAction": {
          "actionStatus": "OK"
        }
      }
    });
  }
}

Python

यह सैंपल, Google Cloud Function के तौर पर चलता है.

def receive_dialog(event: Mapping[str, Any]) -> Mapping[str, Any]:
  """Checks for a form input error, the absence of a "name" value, and returns
     an error if absent. Otherwise, confirms successful receipt of a dialog.

  Args:
      event (Mapping[str, Any]): the event object from Chat API.

  Returns:
      Mapping[str, Any]: the response.
  """

  if common := event.get('common'):
    if form_inputs := common.get('formInputs'):
      if contact_name := form_inputs.get('WIDGET_NAME'):
        if string_inputs := contact_name.get('stringInputs'):
          if name := string_inputs.get('value')[0]:
            return {
              'actionResponse': {
                'type': 'DIALOG',
                'dialogAction': {
                  'actionStatus': 'OK'
                }
              }
            }
          else:
            return {
              'actionResponse': {
                'type': 'DIALOG',
                'dialogAction': {
                  'actionStatus': 'ERROR_MESSAGE'
                }
              }
            }

Apps Script

यह उदाहरण वापस लौटकर एक कार्ड संदेश भेजता है card JSON. Google आपके यूआरएल पैरामीटर को कैसे इस्तेमाल करेगा, यह तय करने के लिए Apps Script कार्ड सेवा.

/**
* Checks for a form input error, the absence of
* a "name" value, and returns an error if absent.
* Otherwise, confirms successful receipt of a dialog.
*
* Confirms successful receipt of a dialog.
*
* @param {Object} event the event object from Chat API.
*
* @return {object} open a Dialog in Google Chat.
*/
function submitDialog(event) {

  // Checks to make sure the user entered a value
  // in a dialog. If no value detected, returns
  // an error message. Any "actionStatus" value other than "OK"
  // gets returned as an error.
  if (event.common.formInputs.WIDGET_NAME[""].stringInputs.value[0] === "") {
    return {
      "actionResponse": {
        "type": "DIALOG",
        "dialogAction": {
          "actionStatus": "ERROR_MESSAGE"
        }
      }
    };

    // Otherwise the Chat app indicates that it received
    // form data from the dialog. An "actionStatus" of "OK" is
    // interpreted as code 200, and the dialog closes.
  } else {
    return {
      "actionResponse": {
        "type": "DIALOG",
        "dialogAction": {
          "actionStatus": "OK"
        }
      }
    };
  }
}

इस उदाहरण में, WIDGET_NAME,name विजेट (जैसे कि contactName) और ERROR_MESSAGE गड़बड़ी के मैसेज का कॉन्टेंट (जैसे कि Don't forget to name your contact). विजेट से इनपुट डेटा प्रोसेस करने के बारे में जानकारी के लिए, देखें इंटरैक्टिव विजेट से डेटा पाएं.

ज़रूरी नहीं: पुष्टि करने वाला मैसेज भेजें

डायलॉग बॉक्स बंद करने के बाद, नया मैसेज भी भेजा जा सकता है. इसके अलावा, मौजूदा आईडी.

नया मैसेज भेजने के लिए, ActionResponse एक ऑब्जेक्ट है, जिसमें type को NEW_MESSAGE पर सेट किया गया है. उदाहरण के लिए, डायलॉग बॉक्स बंद करने के लिए और एक लेख संदेश भेजते हैं, तो इन्हें वापस करें:

  {
    "actionResponse": {
      "type": "NEW_MESSAGE",
    },
    "text": "Your information has been submitted."
  }

किसी मैसेज को अपडेट करने के लिए, ऐसा actionResponse ऑब्जेक्ट दिखाएं जिसमें अपडेट किया गया मैसेज तैयार करता है और type को इनमें से किसी एक पर सेट करता है:

• UPDATE_MESSAGE: यह मैसेज अपडेट करता है डायलॉग अनुरोध ट्रिगर किया.
• UPDATE_USER_MESSAGE_CARDS: कार्ड को लिंक की झलक.

समस्या हल करें

जब Google Chat ऐप्लिकेशन या card कोई गड़बड़ी दिखाता है, Chat के इंटरफ़ेस पर, "कोई गड़बड़ी हुई" मैसेज दिखता है. या "आपका अनुरोध प्रोसेस नहीं किया जा सका." कभी-कभी Chat यूज़र इंटरफ़ेस (यूआई) गड़बड़ी का कोई मैसेज नहीं दिखाता है. हालांकि, Chat ऐप्लिकेशन या कार्ड से कोई अनचाहा नतीजा मिलता है; उदाहरण के लिए, कार्ड मैसेज शायद दिखाना चाहते हैं.

हालांकि, Chat के यूज़र इंटरफ़ेस (यूआई) में गड़बड़ी का मैसेज शायद न दिखे, गड़बड़ी ठीक करने में आपकी मदद करने के लिए, जानकारी देने वाले गड़बड़ी के मैसेज और लॉग डेटा उपलब्ध है जब चैट ऐप्लिकेशन के लिए गड़बड़ी लॉग करने की सेटिंग चालू हो. मदद के लिए, डीबग करने और गड़बड़ियां ठीक करने के लिए, देखें Google Chat से जुड़ी गड़बड़ियां हल करना और गड़बड़ियां ठीक करना.

मिलते-जुलते विषय

• Google Chat ऐप्लिकेशन के होम पेज पर जाकर डायलॉग खोलें.
• डायलॉग बॉक्स का इस्तेमाल करने वाले Chat ऐप्लिकेशन के नमूने देखना
• झलक के लिंक
• स्लैश कमांड सेट अप करना और उनका जवाब देना
• उपयोगकर्ताओं से मिली जानकारी को प्रोसेस करना