หน้านี้อธิบายวิธีสร้างส่วนเสริม Google Workspace ที่ช่วยให้ผู้ใช้ Google เอกสาร ชีต และสไลด์ดูตัวอย่างลิงก์จากบริการของบุคคลที่สามได้
ส่วนเสริมของ Google Workspace สามารถตรวจหาลิงก์ของบริการและแจ้งให้ผู้ใช้ดูตัวอย่าง คุณกำหนดค่าส่วนเสริมเพื่อดูตัวอย่างรูปแบบ URL หลายรายการได้ เช่น ลิงก์ไปยังเคสขอรับความช่วยเหลือ โอกาสในการขาย และโปรไฟล์พนักงาน
วิธีที่ผู้ใช้ดูตัวอย่างลิงก์
ผู้ใช้โต้ตอบกับชิปอัจฉริยะและการ์ดเพื่อดูตัวอย่างลิงก์
เมื่อผู้ใช้พิมพ์หรือวาง URL ลงในเอกสาร Google เอกสารจะแจ้งให้ผู้ใช้แทนที่ลิงก์ด้วยชิปอัจฉริยะ ชิปอัจฉริยะจะแสดงไอคอนและชื่อย่อหรือคำอธิบายเนื้อหาของลิงก์ เมื่อวางเมาส์เหนือชิป ผู้ใช้จะเห็นอินเทอร์เฟซของการ์ดที่แสดงตัวอย่างข้อมูลเพิ่มเติมเกี่ยวกับไฟล์หรือลิงก์
วิดีโอต่อไปนี้แสดงวิธีที่ผู้ใช้แปลงลิงก์เป็นชิปอัจฉริยะและแสดงตัวอย่างการ์ด
วิธีที่ผู้ใช้ดูตัวอย่างลิงก์ในชีตและสไลด์
ระบบไม่รองรับชิปอัจฉริยะของบุคคลที่สามกับการแสดงตัวอย่างลิงก์ในชีตและสไลด์ เมื่อผู้ใช้พิมพ์หรือวาง URL ลงในสเปรดชีตหรืองานนำเสนอ ชีต หรือสไลด์จะแจ้งให้ผู้ใช้แทนที่ลิงก์ด้วยชื่อเป็นข้อความที่ลิงก์แทนชิป เมื่อผู้ใช้วางเมาส์เหนือชื่อลิงก์ ก็จะเห็นอินเทอร์เฟซของการ์ดที่แสดงตัวอย่างข้อมูลเกี่ยวกับลิงก์
รูปภาพต่อไปนี้แสดงลักษณะที่ตัวอย่างลิงก์แสดงผลในชีตและสไลด์
ข้อกำหนดเบื้องต้น
Apps Script
- บัญชี Google Workspace
- ส่วนเสริมของ Google Workspace หากต้องการสร้างส่วนเสริม ให้ทำตามquickstartนี้
Node.js
- บัญชี Google Workspace
- ส่วนเสริมของ Google Workspace หากต้องการสร้างส่วนเสริม ให้ทำตามquickstartนี้
Python
- บัญชี Google Workspace
- ส่วนเสริมของ Google Workspace หากต้องการสร้างส่วนเสริม ให้ทำตามquickstartนี้
Java
- บัญชี Google Workspace
- ส่วนเสริมของ Google Workspace หากต้องการสร้างส่วนเสริม ให้ทำตามquickstartนี้
ไม่บังคับ: ตั้งค่าการตรวจสอบสิทธิ์กับบริการของบุคคลที่สาม
หากส่วนเสริมเชื่อมต่อกับบริการที่ต้องมีการให้สิทธิ์ ผู้ใช้ต้องตรวจสอบสิทธิ์กับบริการเพื่อดูตัวอย่างลิงก์ ซึ่งหมายความว่าเมื่อผู้ใช้วางลิงก์จากบริการของคุณลงในไฟล์เอกสาร ชีต หรือสไลด์เป็นครั้งแรก ส่วนเสริมจะต้องเรียกใช้กระบวนการให้สิทธิ์
หากต้องการตั้งค่าบริการ OAuth หรือข้อความแจ้งการให้สิทธิ์ที่กำหนดเอง โปรดดูคู่มือข้อใดข้อหนึ่งต่อไปนี้
หากคุณสร้างส่วนเสริมโดยใช้ Apps Script โปรดดูการเชื่อมต่อกับบริการที่ไม่ใช่ของ Google จากส่วนเสริม Google Workspace
หากคุณสร้างส่วนเสริมโดยใช้รันไทม์อื่น โปรดดูเชื่อมต่อส่วนเสริมกับบริการของบุคคลที่สาม
ตั้งค่าตัวอย่างลิงก์สำหรับส่วนเสริม
ส่วนนี้จะอธิบายวิธีการตั้งค่าตัวอย่างลิงก์สำหรับส่วนเสริมของคุณ ซึ่งมีขั้นตอนดังต่อไปนี้
- กำหนดค่าการแสดงตัวอย่างลิงก์ในทรัพยากรการทำให้ใช้งานได้หรือไฟล์ Manifest ของส่วนเสริม
- สร้างอินเทอร์เฟซการ์ดและชิปอัจฉริยะสำหรับลิงก์
กำหนดค่าตัวอย่างลิงก์
หากต้องการกำหนดค่าการแสดงตัวอย่างลิงก์ ให้ระบุส่วนและช่องต่อไปนี้ในทรัพยากรการทำให้ใช้งานได้หรือไฟล์ Manifest ของส่วนเสริม
- ในส่วน
addOns
ให้เพิ่มช่องdocs
เพื่อขยายเอกสาร ช่องsheets
เพื่อขยายชีต และช่องslides
เพื่อขยายสไลด์ ในแต่ละช่อง ให้ใช้ทริกเกอร์
linkPreviewTriggers
ที่มีrunFunction
(คุณกําหนดฟังก์ชันนี้ในส่วนสร้างชิปและการ์ดอัจฉริยะ)หากต้องการดูข้อมูลเกี่ยวกับช่องที่คุณระบุในทริกเกอร์
linkPreviewTriggers
ได้ โปรดดูเอกสารอ้างอิงสำหรับไฟล์ Manifest ของ Apps Script หรือทรัพยากรการติดตั้งใช้งานสำหรับรันไทม์อื่นๆในช่อง
oauthScopes
ให้เพิ่มขอบเขตhttps://www.googleapis.com/auth/workspace.linkpreview
เพื่อให้ผู้ใช้ให้สิทธิ์ส่วนเสริมแสดงตัวอย่างลิงก์ในนามของตนได้
โปรดดูตัวอย่างในส่วน oauthScopes
และ addons
ของทรัพยากรการทำให้ใช้งานได้ต่อไปนี้ที่กำหนดค่าตัวอย่างลิงก์สำหรับบริการเคสขอรับความช่วยเหลือ
{
"oauthScopes": [
"https://www.googleapis.com/auth/workspace.linkpreview"
],
"addOns": {
"common": {
"name": "Preview support cases",
"logoUrl": "https://www.example.com/images/company-logo.png",
"layoutProperties": {
"primaryColor": "#dd4b39"
}
},
"docs": {
"linkPreviewTriggers": [
{
"runFunction": "caseLinkPreview",
"patterns": [
{
"hostPattern": "example.com",
"pathPrefix": "support/cases"
},
{
"hostPattern": "*.example.com",
"pathPrefix": "cases"
},
{
"hostPattern": "cases.example.com"
}
],
"labelText": "Support case",
"logoUrl": "https://www.example.com/images/support-icon.png",
"localizedLabelText": {
"es": "Caso de soporte"
}
}
]
},
"sheets": {
"linkPreviewTriggers": [
{
"runFunction": "caseLinkPreview",
"patterns": [
{
"hostPattern": "example.com",
"pathPrefix": "support/cases"
},
{
"hostPattern": "*.example.com",
"pathPrefix": "cases"
},
{
"hostPattern": "cases.example.com"
}
],
"labelText": "Support case",
"logoUrl": "https://www.example.com/images/support-icon.png",
"localizedLabelText": {
"es": "Caso de soporte"
}
}
]
},
"slides": {
"linkPreviewTriggers": [
{
"runFunction": "caseLinkPreview",
"patterns": [
{
"hostPattern": "example.com",
"pathPrefix": "support/cases"
},
{
"hostPattern": "*.example.com",
"pathPrefix": "cases"
},
{
"hostPattern": "cases.example.com"
}
],
"labelText": "Support case",
"logoUrl": "https://www.example.com/images/support-icon.png",
"localizedLabelText": {
"es": "Caso de soporte"
}
}
]
}
}
}
ในตัวอย่างนี้ ส่วนเสริมของ Google Workspace จะแสดงตัวอย่างลิงก์สำหรับบริการเคสขอรับความช่วยเหลือของบริษัท ส่วนเสริมจะระบุรูปแบบ URL
3 รูปแบบเพื่อดูตัวอย่างลิงก์ เมื่อใดก็ตามที่ลิงก์ตรงกับรูปแบบ URL รูปแบบใดรูปแบบหนึ่ง ฟังก์ชันการเรียกกลับ caseLinkPreview
จะสร้างและแสดงการ์ดและชิปอัจฉริยะ หรือในชีตและสไลด์จะแทนที่ URL ด้วยชื่อลิงก์
สร้างชิปและการ์ดอัจฉริยะ
หากต้องการแสดงผลชิปอัจฉริยะและการ์ดสําหรับลิงก์ คุณต้องใช้ฟังก์ชันใดๆ ที่ระบุไว้ในออบเจ็กต์ linkPreviewTriggers
เมื่อผู้ใช้โต้ตอบกับลิงก์ที่ตรงกับรูปแบบ URL ที่ระบุ ทริกเกอร์ linkPreviewTriggers
จะเริ่มทำงานและฟังก์ชันเรียกกลับของลิงก์จะส่งออบเจ็กต์เหตุการณ์ EDITOR_NAME.matchedUrl.url
เป็นอาร์กิวเมนต์ คุณใช้เพย์โหลดของออบเจ็กต์เหตุการณ์นี้ในการสร้างชิปและการ์ดอัจฉริยะสำหรับตัวอย่างลิงก์
ตัวอย่างเช่น หากผู้ใช้ดูตัวอย่างลิงก์ https://www.example.com/cases/123456
ในเอกสาร ระบบจะแสดงผลเพย์โหลดของเหตุการณ์ต่อไปนี้
JSON
{ "docs": { "matchedUrl": { "url": "https://www.example.com/support/cases/123456" } } }
ในการสร้างอินเทอร์เฟซการ์ด ให้ใช้วิดเจ็ตเพื่อแสดงข้อมูลเกี่ยวกับลิงก์ คุณยังสร้างการดำเนินการที่ช่วยให้ผู้ใช้เปิดลิงก์หรือแก้ไขเนื้อหาของลิงก์ได้ด้วย ดูรายการวิดเจ็ตและการทำงานที่ใช้ได้ที่หัวข้อคอมโพเนนต์ที่รองรับสำหรับการ์ดตัวอย่าง
วิธีสร้างชิปและการ์ดอัจฉริยะสำหรับตัวอย่างลิงก์
- ใช้ฟังก์ชันที่คุณระบุในส่วน
linkPreviewTriggers
ของทรัพยากรการทำให้ใช้งานได้ของส่วนเสริมหรือไฟล์ Manifest ดังนี้- ฟังก์ชันนี้ต้องยอมรับออบเจ็กต์เหตุการณ์ที่มี
EDITOR_NAME.matchedUrl.url
เป็นอาร์กิวเมนต์และแสดงผลออบเจ็กต์Card
รายการเดียว - ถ้าบริการของคุณต้องมีการให้สิทธิ์ ฟังก์ชันนั้นจะต้องเรียกใช้ขั้นตอนการให้สิทธิ์ด้วย
- ฟังก์ชันนี้ต้องยอมรับออบเจ็กต์เหตุการณ์ที่มี
- สำหรับการ์ดตัวอย่างแต่ละใบ ให้ใช้ฟังก์ชันเรียกกลับที่มีการโต้ตอบของวิดเจ็ตสำหรับอินเทอร์เฟซ ตัวอย่างเช่น ถ้าคุณมีปุ่ม "ดูลิงก์" ก็สามารถสร้างการดำเนินการที่ระบุฟังก์ชันเรียกกลับเพื่อเปิดลิงก์ในหน้าต่างใหม่ได้ ดูข้อมูลเพิ่มเติมเกี่ยวกับการโต้ตอบกับวิดเจ็ตได้ที่การดำเนินการของส่วนเสริม
โค้ดต่อไปนี้จะสร้างฟังก์ชันเรียกกลับ caseLinkPreview
สำหรับเอกสาร
Apps Script
Node.js
Python
Java
คอมโพเนนต์ที่รองรับการ์ดตัวอย่าง
ส่วนเสริมของ Google Workspace รองรับวิดเจ็ตและการดำเนินการต่อไปนี้สำหรับการ์ดแสดงตัวอย่างลิงก์
Apps Script
ช่องบริการบัตร | ประเภท |
---|---|
TextParagraph |
วิดเจ็ต |
DecoratedText |
วิดเจ็ต |
Image |
วิดเจ็ต |
IconImage |
วิดเจ็ต |
ButtonSet |
วิดเจ็ต |
TextButton |
วิดเจ็ต |
ImageButton |
วิดเจ็ต |
Grid |
วิดเจ็ต |
Divider |
วิดเจ็ต |
OpenLink |
การดำเนินการ |
Navigation |
การดำเนินการ รองรับเฉพาะเมธอด updateCard เท่านั้น |
JSON
ช่องการ์ด (google.apps.card.v1 ) |
ประเภท |
---|---|
TextParagraph |
วิดเจ็ต |
DecoratedText |
วิดเจ็ต |
Image |
วิดเจ็ต |
Icon |
วิดเจ็ต |
ButtonList |
วิดเจ็ต |
Button |
วิดเจ็ต |
Grid |
วิดเจ็ต |
Divider |
วิดเจ็ต |
OpenLink |
การดำเนินการ |
Navigation |
การดำเนินการ รองรับเฉพาะเมธอด updateCard เท่านั้น |
ตัวอย่างทั้งหมด: ส่วนเสริมเคสขอรับความช่วยเหลือ
ตัวอย่างต่อไปนี้แสดงส่วนเสริม Google Workspace ที่แสดงตัวอย่างลิงก์ไปยังเคสขอรับความช่วยเหลือของบริษัทใน Google เอกสาร
ตัวอย่างจะดำเนินการดังนี้
- แสดงตัวอย่างลิงก์ไปยังเคสขอรับความช่วยเหลือ เช่น
https://www.example.com/support/cases/1234
ชิปอัจฉริยะแสดงไอคอนการสนับสนุน และการ์ดตัวอย่างจะมีรหัสเคสและคำอธิบาย - หากตั้งค่าภาษาของผู้ใช้เป็นภาษาสเปน ชิปอัจฉริยะจะแปล
labelText
เป็นภาษาสเปน
ทรัพยากรการทำให้ใช้งานได้
Apps Script
JSON
{
"oauthScopes": [
"https://www.googleapis.com/auth/workspace.linkpreview"
],
"addOns": {
"common": {
"name": "Preview support cases",
"logoUrl": "https://developers.google.com/workspace/add-ons/images/support-icon.png",
"layoutProperties": {
"primaryColor": "#dd4b39"
}
},
"docs": {
"linkPreviewTriggers": [
{
"runFunction": "URL",
"patterns": [
{
"hostPattern": "example.com",
"pathPrefix": "support/cases"
},
{
"hostPattern": "*.example.com",
"pathPrefix": "cases"
},
{
"hostPattern": "cases.example.com"
}
],
"labelText": "Support case",
"localizedLabelText": {
"es": "Caso de soporte"
},
"logoUrl": "https://developers.google.com/workspace/add-ons/images/support-icon.png"
}
]
}
}
}
รหัส
Apps Script
Node.js
Python
Java
แหล่งข้อมูลที่เกี่ยวข้อง
- ดูตัวอย่างลิงก์จาก Google Books ด้วยชิปอัจฉริยะ
- ทดสอบส่วนเสริม
- แหล่งข้อมูลที่ทำให้ Google เอกสารใช้งานได้
- อินเทอร์เฟซของการ์ดสำหรับการแสดงตัวอย่างลิงก์