พรีวิว Clipboard action ฟีเจอร์ใหม่ถูกใจพ่อค้าแม่ขาย คัดลอกข้อความจาก LINE ง่าย ๆ ในปุ่มเดียว

โดยปกติการคัดลอกข้อมูลต่าง ๆ จาก Flex Message, Template Message, Imagemap, หรือ Rich menu ไม่สามารถทำโดยตรงได้ จะต้องทำแบบอ้อมโดยใช้ LIFF เข้ามาช่วย ทำหน้าเว็บไซต์จากนั้นใช้ Clipboard API เพื่อคัดลอกข้อมูลให้ผู้ใช้แทน หรือการส่งข้อความแยก Bubble แทนเพื่อให้ผู้ใช้สามารถกดคัดลอกได้ง่าย ๆ ซึ่งก็เพิ่มความยุ่งยากให้กับผู้ใช้ รวมถึงฝั่งนักพัฒนาเช่นกัน

แต่วันนี้เราสามารถทำปุ่มให้ผู้ใช้สามารถคัดลอกข้อมูลด้วยปุ่ม ๆ เดียว ได้อย่างง่าย ๆ ด้วย Clipboard action ที่เพิ่งเปิดตัวมาหมาด ๆ พร้อมให้ใช้งานแล้วบน LINE เวอร์ชัน 14 เป็นต้นไป

ตัวอย่างการใช้งาน Clipboard action

สำหรับ Clipboard action สามารถใช้ได้ในหลายสถานการณ์ ที่จะเข้ามาช่วยให้ผู้รับหรือลูกค้ามีประสบการณ์ที่ดีขึ้น

ส่งเลขบัญชีให้ลูกค้าโอนเงิน

เชื่อว่าพ่อค้า แม่ค้าหลาย ๆ คนที่ตอนนี้ต่างมีช่องทางการขายผ่าน LINE หรือ Messaging Platform อื่น ๆ จะต้องมีการทำรูปขึ้นมา เป็นช่องทางการชำระเงิน เลขบัญชีต่าง ๆ ที่ให้ลูกค้าโอนเงินมา ซึ่งในการส่งเป็นรูปแล้วให้ผู้ใช้จำเลขไปโอนเงินนั้น อาจจะต้องทำการสลับแอปไปมา เพื่อกรอกเลขบัญชีให้ครบ

ผลลัพธ์การค้นหา ‘เทมเพลต โอนเงิน’ ใน Google

การใช้ Clipboard action เข้ามาช่วย ก็จะช่วยให้ลูกค้าสามารถกดคัดลอกเพียงปุ่มเดียวและนำไปวางในแอปพลิเคชันธนาคารได้เลย

Flex Message สำหรับคัดลอกเลขที่บัญชี

ส่งหมายเลขติดตามไปรษณีย์, พัสดุ

การส่งพัสดุก็เช่นกัน เราก็สามารถทำ Flex Message สวย ๆ เพื่อแสดงสถานะการจัดส่ง และให้ผู้ใช้สามารถคัดลอกหมายเลขติดตามได้ง่าย ๆ ด้วยปุ่มเดียว

Flex Message แสดงสถานะและสามารถคัดลอกหมายเลขพัสดุ

คัดลอกโค้ดคูปองหรือโค้ดส่วนลดเพื่อไปใส่ในแอปอื่น ๆ

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

Template Message สำหรับคัดลอกโค้ดส่วนลด

Clipboard action ใช้กับอะไรได้บ้าง ?

ในตอนนี้ Clipboard action จะสามารถใช้ได้กับ LINE Messaging API โดยเป็นประเภทของ Action object ที่เพิ่มมา สามารถฝังใน Property Action บนปุ่ม รูปภาพ หรือ Area ต่าง ๆ

Flex Message

{
  "type": "flex",
  "altText": "Flex Message",
  "contents": {
    "type": "bubble",
    "body": {
      "type": "box",
      "layout": "vertical",
      "contents": [
        {
          "type": "button",
          "action": {
            "type": "clipboard",
            "label": "คัดลอก",
            "clipboardText": "ข้อความคัดลอก"
          },
          "style": "primary",
          "color": "#0000ff"
        }
      ]
    }
  }
}

Template Message

{
  "type": "template",
  "altText": "This is a buttons template",
  "template": {
    "type": "buttons",
    "thumbnailImageUrl": "https://example.com/bot/images/image.jpg",
    "imageAspectRatio": "rectangle",
    "imageSize": "cover",
    "imageBackgroundColor": "#FFFFFF",
    "title": "Menu",
    "text": "Please select",
    "defaultAction": {
      "type": "uri",
      "label": "View detail",
      "uri": "http://example.com/page/123"
    },
    "actions": [
      {
        "type": "clipboard",
        "label": "คัดลอก",
        "clipboardText": "ข้อความคัดลอก"
      }
    ]
  }
}

Imagemap

{
  "type": "imagemap",
  "baseUrl": "https://example.com/bot/images/rm001",
  "altText": "This is an imagemap",
  "baseSize": {
    "width": 1040,
    "height": 1040
  },
  "video": {
    "originalContentUrl": "https://example.com/video.mp4",
    "previewImageUrl": "https://example.com/video_preview.jpg",
    "area": {
      "x": 0,
      "y": 0,
      "width": 1040,
      "height": 585
    },
    "externalLink": {
      "linkUri": "https://example.com/see_more.html",
      "label": "See More"
    }
  },
  "actions": [
    {
      "type": "clipboard",
      "clipboardText": "ข้อความคัดลอก",
      "area": {
        "x": 0,
        "y": 586,
        "width": 520,
        "height": 454
      }
    }
  ]
}

Rich Menu

{
    "size": {
      "width": 2500,
      "height": 1686
    },
    "selected": false,
    "name": "Nice rich menu",
    "chatBarText": "Tap to open",
    "areas": [
      {
        "bounds": {
          "x": 0,
          "y": 0,
          "width": 2500,
          "height": 1686
        },
        "action": {
          "type": "clipboard",
          "clipboardText": "ข้อความคัดลอก"
        }
      }
   ]
}

Quick Reply

{
  "type": "text",
  "text": "โค้ดส่วนลด: LINE1000 หมดอายุ 28 กุมภาพันธ์ 2567",
  "quickReply": {
    "items": [
      {
        "type": "action",
        "imageUrl": "https://example.com/sushi.png",
        "action": {
          "type": "clipboard",
          "label": "คัดลองโค้ด",
          "clipboardText": "LINE1000"
        }
      }
    ]
  }
}

จากตัวอย่าง Message ด้านบน นักพัฒนาสามารถนำไป Push / Reply / Multicast / Narrowcast / Broadcast ได้เลยตามสเปกบนเว็บไซต์ LINE Developers

สุดท้ายนี้การใช้งาน Clipboard action นี้ยังใช้ได้กับ LINE Messaging API และเฉพาะบนสมาร์ตโฟนเท่านั้น ยังไม่สามารถใช้งานใน LINE PC หรือทำเป็นเทมเพลตสำหรับการใช้งานร่วมกับ Share Target Picker ของ LINE Front-end Framework (LIFF) ได้