จัดรูปแบบข้อความ

หน้านี้อธิบายวิธีที่แอป Google Chat จัดรูปแบบข้อความเพื่อส่งข้อความที่มีองค์ประกอบต่อไปนี้

  • ข้อความ Rich Text ที่มีไฮเปอร์ลิงก์หรือ @mention ผู้ใช้ทั้งหมดหรือบางคนในพื้นที่ แชท
  • ข้อความที่ปรากฏในอินเทอร์เฟซของการ์ด รวมถึงข้อความย่อหน้าหรือ ข้อความ UI ที่แสดงข้างไอคอน เช่น ปุ่ม

จัดรูปแบบข้อความ

Chat ให้คุณเพิ่มการจัดรูปแบบพื้นฐานให้กับข้อความได้ ซึ่งรวมถึงตัวหนา ตัวเอียง และขีดทับ คุณจัดรูปแบบข้อความใน SMS แตกต่างจากในข้อความการ์ดเนื่องจาก SMS จะจัดรูปแบบด้วยไวยากรณ์เดียวกันกับที่ผู้ใช้ Chat ใช้

สำหรับข้อความที่ส่งโดยใช้ Chat API คุณจะใช้ไวยากรณ์ Chat เดิมต่อไปหรือใช้ไวยากรณ์มาร์กดาวน์มาตรฐานก็ได้ (รองรับโดยการระบุ markup_syntax ในเนื้อหาคำขอ)

หากต้องการจัดรูปแบบข้อความ ให้ใช้ไวยากรณ์ต่อไปนี้

รูปแบบ MARKUP_SYNTAX_CHAT MARKUP_SYNTAX_MARKDOWN ตัวอย่างไวยากรณ์ ข้อความที่แสดงใน Google Chat
ตัวหนา * **

*hello*

หรือ

**hello**

hello
ตัวเอียง _ (ขีดล่าง) *

_hello_

หรือ

*hello*

hello
ขีดทับ ~ ~~

~hello~

หรือ

~~hello~~

hello
Monospace ` (แบ็กควอต) ` (แบ็กควอต) `hello` hello
บล็อกที่มีความกว้างอักษรขนาดเดียว ` ` ` (เครื่องหมายแบ็กควอต 3 ตัว) ` ` ` (เครื่องหมายแบ็กควอต 3 ตัว) ```
Hello
World
```
Hello
World
รายการสัญลักษณ์หัวข้อย่อย * หรือ - (ขีดกลาง) ตามด้วยการเว้นวรรค * หรือ - (ขีดกลาง) ตามด้วยการเว้นวรรค

* นี่คือรายการแรกในรายการ

* นี่คือรายการที่ 2 ในรายการ

  • นี่คือรายการแรกในรายการ
  • นี่คือรายการที่ 2 ในรายการ
รายการที่ซ้อนกัน * หรือ - (ขีดกลาง) ตามด้วยช่องว่าง โดยมีช่องว่าง 4 ช่องต่อระดับการซ้อน * หรือ - (ขีดกลาง) ตามด้วยช่องว่าง โดยมีช่องว่าง 4 ช่องต่อระดับการซ้อน

* นี่คือรายการที่มีความลึกซ้อนกันระดับ 1 ในรายการ

    * นี่คือรายการที่มีความลึกแบบซ้อนกัน 2 ระดับในรายการ

        * นี่คือรายการที่มีการซ้อนระดับ 3 ในลิสต์

  • นี่คือรายการที่มีความลึกซ้อนกันระดับ 1 ในรายการ
    • นี่คือรายการที่มีความลึกซ้อนกัน 2 ระดับในรายการ
      • นี่คือรายการที่มีความลึกซ้อนกัน 3 ระดับในลิสต์
รายการที่เรียงลำดับเลข ไม่รองรับ 1. (ตัวเลขตามด้วยจุดและเว้นวรรค)

1. นี่คือรายการแรกในรายการ

2. นี่คือรายการที่ 2 ในรายการ

  1. นี่คือรายการแรกในรายการ
  2. นี่คือรายการที่ 2 ในรายการ
การอ้างอิงแบบบล็อก > (เครื่องหมายมากกว่า) > (เครื่องหมายมากกว่า) >สวัสดี
ไอคอนรูปแบบข้อความที่ยกมา hello
ไฮเปอร์ลิงก์ <hyperlink|display text> [display text](hyperlink)

<https://example.com|Example website>

หรือ

[Example website](https://example.com)

เว็บไซต์ตัวอย่าง

ดูข้อมูลเพิ่มเติมเกี่ยวกับการไฮเปอร์ลิงก์ได้ที่จัดรูปแบบลิงก์

พูดถึงผู้ใช้ <users/{user}> โดยที่ {user} คือรหัสผู้ใช้

<chat-user data-user="users/{user}">

หรือ

<chat-user data-email="{email}">

<users/123456789012345678901> หรือ <users/all>

หรือ

<chat-user data-user="users/123456789012345678901">

<chat-user data-user="users/all"> หรือ

<chat-user data-email="email@example.com">

@Mahan S

ดูข้อมูลเพิ่มเติมเกี่ยวกับการกล่าวถึงผู้ใช้ได้ที่กล่าวถึงผู้ใช้ในข้อความ

Custom Emoji

<customEmojis/{uid}>

หรือ

<customEmojis/:{name}:>

<chat-emoji data-custom-emoji="customEmojis/{uid}">

หรือ

<chat-emoji data-emoji-name=":{name}:">

<customEmojis/abc-123-def>

หรือ

<customEmojis/:smiley-cat:>

หรือ

<chat-emoji data-custom-emoji="customEmojis/abc-123-def">

หรือ

<chat-emoji data-emoji-name=":smiley-cat:">

🐱 (อีโมจิแมวยิ้มที่กำหนดเอง)
การอ้างอิง ไม่รองรับ <chat-citation data-id="{id}">{text}</chat-citation> โดย {id} คือรหัสการอ้างอิงที่กำหนดไว้ในข้อความ elements <chat-citation data-id="cite_1">cited text</chat-citation>

ข้อความที่อ้างอิง

ดูข้อมูลเพิ่มเติมเกี่ยวกับการอ้างอิงได้ที่เพิ่มการอ้างอิงลงในข้อความ

ตัวอย่างเช่น ลองพิจารณา JSON ต่อไปนี้

    {
      "text": "Your pizza delivery *has arrived*!\nThank you for using _Cymbal Pizza!_"
    }

ข้อความที่จัดรูปแบบนี้จะแสดงข้อมูลต่อไปนี้ในพื้นที่ Chat

แอป Cymbal Pizza ส่งข้อความว่าการนำส่งมาถึงแล้ว

ดูการจัดรูปแบบข้อความที่ส่งในข้อความ

เมื่อผู้ใช้ส่งข้อความ เนื้อหาข้อความแบบข้อความธรรมดาจะอยู่ในฟิลด์ text การจัดรูปแบบบางอย่างที่ใช้กับข้อความโดยใช้ไวยากรณ์มาร์กดาวน์ จะอยู่ในช่อง text การจัดรูปแบบเพิ่มเติมอยู่ในฟิลด์ เอาต์พุตเท่านั้นformattedText ซึ่งรวมถึงรายการต่อไปนี้

  • ไวยากรณ์มาร์กดาวน์เพิ่มเติมสำหรับข้อความ
  • การพูดถึงผู้ใช้
  • ไฮเปอร์ลิงก์ที่กำหนดเอง
  • อีโมจิที่กำหนดเอง

ตัวอย่างเช่น ลองพิจารณาข้อความต่อไปนี้ที่ผู้ใช้ส่งมา

ได้รับข้อความใน Chat ที่มีคำ

หากข้อความได้รับการจัดรูปแบบโดยใช้เมนูรูปแบบใน UI ของ Chat ฟิลด์ text จะมีข้อความเท่านั้น ส่วนฟิลด์ formattedText จะมีมาร์กอัป ข้อความ และไฮเปอร์ลิงก์ ตัวอย่างต่อไปนี้แสดงฉบับร่างของข้อความที่มีคำที่เป็นไฮเปอร์ลิงก์ รายการในลิสต์ และคำที่ทำเป็นตัวหนา

ข้อความร่างที่มีคำ

ข้อความจะได้รับในรูปแบบต่อไปนี้

    {
      "text": "I can meet there at:\nNoon\n3 pm\n5 pm\nWhat time works for you?",
      "formattedText": "I can meet <http://example.com|there> at:\n* Noon\n* 3 pm\n* 5 pm\nWhat time works for *you*?",
    }

หากคุณใส่ URL ลิงก์ธรรมดาในข้อความ เช่น http://www.example.com/ Google Chat จะใช้ URL นี้เป็นข้อความลิงก์และ สร้างไฮเปอร์ลิงก์ข้อความนั้นไปยัง URL ที่ระบุโดยอัตโนมัติ

หากต้องการระบุข้อความลิงก์อื่นสำหรับลิงก์ ให้ใช้ไวยากรณ์ต่อไปนี้

  • สำหรับข้อความ API ที่กำหนดค่าด้วยมาร์กดาวน์ ให้ใช้ไวยากรณ์ลิงก์มาร์กดาวน์มาตรฐาน

    ตัวอย่างไวยากรณ์ ข้อความที่แสดงใน Google Chat
    [Example website](https://example.com)
  • สำหรับข้อความธรรมดามาตรฐาน ให้ใช้ไวยากรณ์ไปป์ ดังนี้

    ตัวอย่างไวยากรณ์ ข้อความที่แสดงใน Google Chat
    <https://example.com|Example website>

    คุณจะใส่ข้อความไปป์และข้อความลิงก์หรือไม่ก็ได้ ดังนั้น <https://example.com> และ https://example.com จึงมีความหมายเหมือนกัน

ใช้อีโมจิที่กำหนดเองในข้อความ

แอปแชทสามารถส่งข้อความ พร้อมอีโมจิที่กำหนดเองเพื่อปรับเปลี่ยนข้อความในแบบของคุณ อีโมจิที่กำหนดเองใช้ได้เฉพาะในองค์กร Google Workspace และผู้ดูแลระบบต้องเปิดใช้อีโมจิที่กำหนดเองสำหรับองค์กร ดูข้อมูลเพิ่มเติมได้ที่ ดูข้อมูลเกี่ยวกับอีโมจิที่กำหนดเองใน Google Chat และจัดการสิทธิ์ของอีโมจิที่กำหนดเอง

หากต้องการสร้างข้อความด้วยอีโมจิที่กำหนดเอง แอปของคุณต้องใช้การตรวจสอบสิทธิ์ผู้ใช้ ระบบไม่รองรับอีโมจิที่กำหนดเองใน ข้อความที่สร้างเป็น Webhook หรือในข้อความที่สร้างขึ้นด้วยการตรวจสอบสิทธิ์แอป

หากต้องการเพิ่มอีโมจิที่กำหนดเองลงในข้อความ ให้ระบุ name หรือ emoji_name ของทรัพยากร customEmoji ดังนี้

{
    "text": "Hello <customEmojis/CUSTOM_EMOJI_ID>."
}

หากต้องการใช้ตัวอย่างนี้ ให้แทนที่ CUSTOM_EMOJI_ID ด้วยรหัส สำหรับอีโมจิที่กำหนดเอง คุณดูรหัสนี้ได้ในฟิลด์ name หรือ emoji_name ของทรัพยากร customEmoji

หากแอปส่งข้อความโดยใช้ไวยากรณ์ Markdown คุณสามารถระบุอีโมจิที่กำหนดเองในรูปแบบแท็ก HTML โดยใช้รหัสอีโมจิที่กำหนดเองได้ดังนี้

{
  "text": "Hello <chat-emoji data-custom-emoji=\"customEmojis/CUSTOM_EMOJI_ID\">."
}

หรือจะระบุชื่ออีโมจิที่กำหนดเองก็ได้

{
  "text": "Hello <chat-emoji data-emoji-name=\"CUSTOM_EMOJI_NAME\">."
}

หากต้องการใช้ตัวอย่างเหล่านี้ ให้แทนที่ CUSTOM_EMOJI_ID ด้วยรหัสอีโมจิที่กำหนดเอง และ CUSTOM_EMOJI_NAME ด้วยชื่อรหัสย่อของอีโมจิที่กำหนดเอง

พูดถึงผู้ใช้ในข้อความ

แอปใน Chat สามารถส่งข้อความ ที่ @พูดถึงผู้ใช้คนเดียวหรือผู้ใช้ทั้งหมดในพื้นที่ทำงานใน Chat นอกจากนี้ แอปใน Chat ยังกล่าวถึงผู้ใช้ที่ยังไม่ได้เข้าร่วมพื้นที่ทำงานหรือเป็นสมาชิกของพื้นที่ทำงานที่อยู่ในโหมดการนำเข้าได้ด้วย

ข้อความแบบเงียบไม่รองรับการกล่าวถึงผู้ใช้ การใส่การกล่าวถึงในข้อความแบบเงียบจะทำให้เกิด ข้อผิดพลาด

@พูดถึงผู้ใช้ที่เฉพาะเจาะจง

หากต้องการ @กล่าวถึงผู้ใช้ที่เฉพาะเจาะจง ให้เพิ่ม <users/{user}> ในข้อความ โดยที่ {user} คือรหัสของผู้ใช้ ตัวอย่างเช่น ลองพิจารณาข้อความต่อไปนี้ ซึ่ง 123456789012345678901 แสดงถึงรหัสสำหรับผู้ใช้ Mahan S.

{
    "text": "A customer has reported an issue. Assigning ticket #942 to <users/123456789012345678901>."
}

หากแอปส่งข้อความโดยใช้ไวยากรณ์ Markdown ให้ใช้รูปแบบแท็ก HTML chat-user เพื่อระบุรหัสผู้ใช้

{
  "text": "Assigning ticket #942 to <chat-user data-user=\"users/123456789012345678901\">."
}

หรือระบุทางอีเมล

{
  "text": "Assigning ticket #942 to <chat-user data-email=\"mahan@example.com\">."
}

ข้อความจะแสดงดังนี้

แอป Chat พูดถึงบุคคลในข้อความ

คุณระบุค่า users/{user} ได้ด้วยวิธีต่อไปนี้

  • หากแอป Google Chat ตอบกลับข้อความที่ผู้ใช้ส่งมา คุณสามารถใช้ฟิลด์ message.sender.name ของMESSAGE เหตุการณ์การโต้ตอบได้
  • หากแอป Google Chat สร้างข้อความแบบไม่พร้อมกัน คุณจะระบุค่าสำหรับ users/{user} ได้ด้วยวิธีต่อไปนี้

    • ใช้ฟิลด์ name ของทรัพยากร Google Chat User เช่น users/123456789012345678901
    • ใช้อีเมลของผู้ใช้เป็นนามแฝงสำหรับค่า {user} เช่น หากอีเมลคือ mahan@example.com คุณจะระบุผู้ใช้เป็น users/mahan@example.com ได้ หากต้องการใช้อีเมลแทน แอป Google Chat ต้องตรวจสอบสิทธิ์ในฐานะผู้ใช้
  • หากใช้ People API คุณยังใช้เมธอด people.get เพื่อระบุรหัสผู้ใช้ได้ด้วย

@พูดถึงผู้ใช้ทั้งหมด

หากต้องการสร้างข้อความที่ @พูดถึงทุกคนในพื้นที่ทำงาน ให้แทนที่ {user} ด้วย all ตัวอย่าง JSON ต่อไปนี้จะกล่าวถึงผู้ใช้ทั้งหมดในข้อความ

{
    "text": "Important message for <users/all>: Code freeze starts at midnight tonight!"
}

หากแอปส่งข้อความโดยใช้ไวยากรณ์ Markdown ให้ระบุการกล่าวถึงโดยใช้รูปแบบแท็ก HTML chat-user ดังนี้

{
  "text": "Important message for <chat-user data-user=\"users/all\">: Code freeze starts at midnight tonight!"
}

เพิ่มการอ้างอิงในข้อความ

แอปใน Chat สามารถใส่การอ้างอิงในข้อความเพื่อระบุข้อมูลแหล่งที่มาโดยละเอียดแก่ผู้ใช้ คุณระบุแหล่งที่มาได้ 2 วิธีดังนี้

  • การอ้างอิงในบรรทัด: เพิ่มการ์ดแบบอินเทอร์แอกทีฟที่จะปรากฏขึ้นเมื่อผู้ใช้วางเคอร์เซอร์เหนือข้อความบางส่วนในข้อความของคุณ
  • แหล่งที่มาของส่วนท้าย: แสดงรายการแหล่งที่มาที่ด้านล่างของข้อความเป็นลิงก์ส่วนท้าย

ระบบจะรองรับการอ้างอิงเมื่อตั้งค่า markupSyntax ของข้อความเป็น MARKUP_SYNTAX_MARKDOWN เท่านั้น ฟีเจอร์นี้รองรับเฉพาะการสร้างข้อความแบบไม่พร้อมกันโดยใช้ Chat API

วิธีเพิ่มการอ้างอิงแบบอินไลน์ลงในข้อความ

  1. ระบุแหล่งที่มาในรายการcitationsของข้อความ elements โดยกำหนด id ที่ไม่ซ้ำกันให้กับออบเจ็กต์ Citation แต่ละรายการ
  2. ในข้อความ ให้ใส่ข้อความที่ต้องการอ้างอิงโดยใช้รูปแบบแท็ก HTML chat-citation: <chat-citation data-id="{id}">{text}</chat-citation> ตรวจสอบว่า {id} ตรงกับรหัสที่คุณกำหนดไว้ใน elements ระบบจะไม่สนใจการอ้างอิงที่ไม่ได้อ้างอิง (ที่ไม่มีแท็กที่ตรงกัน)
{
  "text": "This is a <chat-citation data-id=\"cite_1\">cited</chat-citation> text.",
  "markupSyntax": "MARKUP_SYNTAX_MARKDOWN",
  "elements": {
    "citations": [
      {
        "id": "cite_1",
        "citedSources": [
          {
            "title": "Example Source",
            "uri": "https://example.com"
          }
        ]
      }
    ]
  }
}

หากต้องการเพิ่มแหล่งที่มาของส่วนท้ายลงในข้อความ ให้ระบุแหล่งที่มาในรายการ citedSources ของข้อความ elements แหล่งที่มาที่ระบุไว้ที่นี่จะปรากฏใต้ข้อความโดยอัตโนมัติเป็นลิงก์ส่วนท้าย และไม่จำเป็นต้องมีแท็กอินไลน์ในข้อความ

{
  "text": "This is a message with a footer source.",
  "markupSyntax": "MARKUP_SYNTAX_MARKDOWN",
  "elements": {
    "citedSources": [
      {
        "title": "Example Source",
        "uri": "https://example.com"
      }
    ]
  }
}

จัดรูปแบบข้อความที่ปรากฏในการ์ด

ฟิลด์ข้อความส่วนใหญ่ในบัตรจะรองรับการจัดรูปแบบข้อความพื้นฐานโดยใช้ ชุดย่อยของแท็ก HTML ขนาดเล็ก คุณจัดรูปแบบข้อความในการ์ดแตกต่างจากข้อความ เนื่องจากข้อความจะจัดรูปแบบด้วยไวยากรณ์เดียวกันกับที่ผู้ใช้ Chat ใช้


ใช้เครื่องมือสร้างการ์ดเพื่อออกแบบและแสดงตัวอย่างการรับส่งข้อความและอินเทอร์เฟซผู้ใช้สำหรับแอป Chat โดยทำดังนี้

เปิดเครื่องมือสร้างการ์ด

จัดรูปแบบข้อความย่อหน้า

แท็กที่รองรับและวัตถุประสงค์ของแท็กจะแสดงในตารางต่อไปนี้

รูปแบบ ตัวอย่าง ผลลัพธ์ที่แสดง
ตัวหนา "This is <b>bold</b>." ข้อความนี้คือตัวหนา
ตัวเอียง "This is <i>italics</i>." นี่คือตัวเอียง
ขีดเส้นใต้ "This is <u>underline</u>." นี่คือขีดเส้นใต้
ขีดทับ "This is <s>strikethrough</s>." นี่คือขีดทับ
สีแบบอักษร "This is <font color=\"#FF0000\">red font</font>." นี่คือแบบอักษรสีแดง
ไฮเปอร์ลิงก์ "This is a <a href=\"https://www.google.com\">hyperlink</a>." นี่คือไฮเปอร์ลิงก์
เวลา "This is a time format: <time>2023-02-16 15:00</time>." รูปแบบเวลาคือ
บรรทัดใหม่ "This is the first line. <br> This is a new line." นี่คือบรรทัดแรก
นี่คือบรรทัดใหม่

หากต้องการกำหนดรายการและบล็อกโค้ด ให้ใช้แท็กต่อไปนี้

รูปแบบ ตัวอย่าง ผลลัพธ์ที่แสดง
บรรทัดใหม่ "Line 1<br>Line 2" บรรทัด 1
บรรทัด 2
Monospace "This is an <code>inline code</code>." นี่คือ inline code
บล็อกที่มีความกว้างอักษรขนาดเดียว "<pre><code>This a code block.</code></pre>"
This is a code block.
รายการสัญลักษณ์หัวข้อย่อย "<ul><li>List item 1</li><li>List item 2</li></ul>"
  • รายการที่ 1
  • รายการที่ 2
รายการตามลำดับ "<ol><li>List item 1</li><li>List item 2</li></ol>"
  1. รายการที่ 1
  2. รายการที่ 2

Markdown

เมื่อเปิดใช้ไวยากรณ์ Markdown คุณจะใช้ไวยากรณ์ต่อไปนี้ได้

รูปแบบ ตัวอย่าง ผลลัพธ์ที่แสดง
ตัวหนา **hello** หรือ __hello__ hello
ตัวเอียง *hello* หรือ _hello_ hello
ขีดทับ ~hello~ hello
Monospace `hello` hello
บล็อกที่มีความกว้างอักษรขนาดเดียว ```
Hello
World
```
Hello
World
รายการสัญลักษณ์หัวข้อย่อย

- นี่คือรายการแรกในรายการ

- นี่คือรายการที่ 2 ในรายการ

  • นี่คือรายการแรกในรายการ
  • นี่คือรายการที่ 2 ในรายการ

* นี่คือรายการแรกในรายการ

* นี่คือรายการที่ 2 ในรายการ

  • นี่คือรายการแรกในรายการ
  • นี่คือรายการที่ 2 ในรายการ
รายการตามลำดับ

1. นี่คือรายการแรกในรายการ

2. นี่คือรายการที่ 2 ในรายการ

  1. นี่คือรายการแรกในรายการ
  2. นี่คือรายการที่ 2 ในรายการ
ไฮเปอร์ลิงก์ [ตัวอย่างเว็บไซต์](https://example.com) เว็บไซต์ตัวอย่าง

เพิ่มไอคอนลงในข้อความ

หากต้องการแสดงไอคอนข้างข้อความในการ์ด คุณสามารถใช้ DecoratedText และ ButtonList วิดเจ็ต

ส่วนต่อไปนี้อธิบายวิธีใช้ไอคอนในตัว, ไอคอน Google Material หรือไอคอนที่กำหนดเองในข้อความหรือปุ่มที่ตกแต่งแล้ว

ใช้ไอคอนจาก Chat

หากต้องการใช้ไอคอนในตัวที่มีใน Chat ให้ระบุอย่างใดอย่างหนึ่งต่อไปนี้

ตารางต่อไปนี้แสดงรายการไอคอนในตัวที่ใช้ได้กับข้อความในการ์ด

AIRPLANE BOOKMARK
BUS CAR
นาฬิกา CONFIRMATION_NUMBER_ICON
คำอธิบาย DOLLAR
อีเมล EVENT_SEAT
FLIGHT_ARRIVAL FLIGHT_DEPARTURE
HOTEL HOTEL_ROOM_TYPE
เชิญ MAP_PIN
MEMBERSHIP MULTIPLE_PEOPLE
PERSON โทรศัพท์
RESTAURANT_ICON SHOPPING_CART
STAR STORE
ตั๋ว ฝึก
VIDEO_CAMERA VIDEO_PLAY

ตัวอย่างต่อไปนี้แสดงการ์ดที่มีไอคอนอีเมล

ใช้ไอคอน Material ของ Google

คุณสามารถใช้ไอคอน Material ของ Google เพื่อเลือกจากตัวเลือกไอคอนกว่า 2,500 รายการ และปรับแต่ง ความหนา เส้นขอบ และระดับของไอคอนได้

ตัวอย่างการ์ดที่มีไอคอนจากดีไซน์ Material มีดังนี้

ใช้ไอคอนที่กำหนดเอง

หากต้องการเพิ่มไอคอนที่กำหนดเอง ให้ใส่ฟิลด์ iconUrl และระบุ URL ที่เกี่ยวข้องของไอคอน

ตัวอย่างไอคอนที่กำหนดเองมีดังนี้