หน้านี้จะอธิบายวิธีสร้างส่วนเสริม Google Workspace ที่ช่วยให้ผู้ใช้ Google เอกสารแสดงตัวอย่างลิงก์จากบริการของบุคคลที่สาม
ส่วนเสริมของ Google Workspace จะตรวจหาลิงก์ของบริการและแจ้งให้ผู้ใช้ Google เอกสารดูตัวอย่างได้ คุณกําหนดค่าส่วนเสริมเพื่อดูตัวอย่างรูปแบบ URL ต่างๆ ได้ เช่น ลิงก์ไปยังประวัติการช่วยเหลือ โอกาสในการขาย และโปรไฟล์พนักงาน
ผู้ใช้ดูตัวอย่างลิงก์อย่างไร
หากต้องการแสดงตัวอย่างลิงก์ในเอกสารของ Google เอกสาร ผู้ใช้จะต้องโต้ตอบกับชิปอัจฉริยะและการ์ดตามขั้นตอนต่อไปนี้
เมื่อผู้ใช้พิมพ์หรือวาง URL ลงในเอกสาร Google เอกสารจะแจ้งให้ผู้ใช้ใส่ลิงก์แทนชิปอัจฉริยะ ชิปอัจฉริยะจะแสดงไอคอน และชื่อย่อหรือคําอธิบายเนื้อหาของลิงก์ เมื่อผู้ใช้วางเมาส์เหนือชิป ก็จะเห็นอินเทอร์เฟซการ์ดที่แสดงตัวอย่างข้อมูลเพิ่มเติมเกี่ยวกับไฟล์หรือลิงก์ดังกล่าว
วิดีโอต่อไปนี้แสดงวิธีที่ผู้ใช้แปลงลิงก์เป็นชิปอัจฉริยะและแสดงตัวอย่างการ์ด
สิ่งที่ต้องดำเนินการก่อน
Apps Script
- บัญชี Google Workspace
- ส่วนเสริมของ Google Workspace หากต้องการสร้างส่วนเสริม ให้ทําตามการเริ่มต้นอย่างรวดเร็วนี้
Node.js
- บัญชี Google Workspace
- ส่วนเสริมของ Google Workspace หากต้องการสร้างส่วนเสริม ให้ทําตามการเริ่มต้นอย่างรวดเร็วนี้
Python
- บัญชี Google Workspace
- ส่วนเสริมของ Google Workspace หากต้องการสร้างส่วนเสริม ให้ทําตามการเริ่มต้นอย่างรวดเร็วนี้
Java
- บัญชี Google Workspace
- ส่วนเสริมของ Google Workspace หากต้องการสร้างส่วนเสริม ให้ทําตามการเริ่มต้นอย่างรวดเร็วนี้
ไม่บังคับ: ตั้งค่าการตรวจสอบสิทธิ์กับบริการของบุคคลที่สาม
หากส่วนเสริมเชื่อมต่อกับบริการที่ต้องมีการให้สิทธิ์ ผู้ใช้ต้องตรวจสอบสิทธิ์กับบริการเพื่อดูตัวอย่างลิงก์ ซึ่งหมายความว่าเมื่อผู้ใช้วางลิงก์จากบริการของคุณลงในเอกสาร Google เอกสารเป็นครั้งแรก ส่วนเสริมจะต้องเรียกใช้ขั้นตอนการให้สิทธิ์
หากต้องการตั้งค่าบริการ OAuth หรือข้อความแจ้งการให้สิทธิ์ที่กําหนดเอง โปรดดูหนึ่งในคําแนะนําต่อไปนี้
หากคุณสร้างส่วนเสริมโดยใช้ Apps Script โปรดดูหัวข้อการเชื่อมต่อกับบริการที่ไม่ใช่ของ Google จากส่วนเสริมของ Google Workspace
หากคุณสร้างส่วนเสริมโดยใช้รันไทม์อื่น โปรดดูเชื่อมต่อส่วนเสริมกับบริการของบุคคลที่สาม
ตั้งค่าตัวอย่างลิงก์สําหรับส่วนเสริม
ส่วนนี้จะอธิบายวิธีการตั้งค่าตัวอย่างลิงก์สําหรับส่วนเสริมของคุณ ซึ่งประกอบด้วยขั้นตอนต่อไปนี้
- กําหนดค่าตัวอย่างลิงก์ในทรัพยากรการทําให้ใช้งานได้ของส่วนเสริมหรือไฟล์ Manifest
- สร้างชิปอัจฉริยะและอินเทอร์เฟซการ์ดสําหรับลิงก์ของคุณ
กําหนดค่าตัวอย่างลิงก์
หากต้องการกําหนดค่าตัวอย่างลิงก์ ให้ระบุส่วนและฟิลด์ต่อไปนี้ในไฟล์การทําให้ใช้งานได้ของส่วนเสริมหรือไฟล์ Manifest
- ในส่วน
addOns
ให้เพิ่มช่องdocs
เพื่อขยาย Google เอกสาร ในช่อง
docs
ให้ใช้ทริกเกอร์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"
}
}
]
}
}
}
ในตัวอย่างนี้ ตัวอย่างส่วนเสริมของ Google Workspace จะลิงก์ไปที่บริการกรณีการสนับสนุนของบริษัท ส่วนเสริมจะระบุรูปแบบ URL 3 รายการ
เพื่อดูตัวอย่างลิงก์ เมื่อใดก็ตามที่ลิงก์ตรงกับรูปแบบ URL รูปแบบใดรูปแบบหนึ่งในเอกสารของ Google เอกสาร ฟังก์ชันเรียกกลับ caseLinkPreview
จะสร้างและแสดงชิปอัจฉริยะและการ์ด
สร้างชิปและการ์ดอัจฉริยะ
หากต้องการส่งคืนชิปอัจฉริยะและการ์ดสําหรับลิงก์ คุณต้องใช้ฟังก์ชันใดก็ตามที่คุณระบุไว้ในออบเจ็กต์ linkPreviewTriggers
เมื่อผู้ใช้โต้ตอบกับลิงก์ที่ตรงกับรูปแบบ URL ที่ระบุ ทริกเกอร์ linkPreviewTriggers
จะเริ่มทํางานแล้ว ฟังก์ชันเรียกกลับจะส่งออบเจ็กต์ออบเจ็กต์ docs.matchedUrl.url
เป็นอาร์กิวเมนต์ คุณใช้เพย์โหลดของออบเจ็กต์เหตุการณ์นี้เพื่อสร้างชิปอัจฉริยะและการ์ดสําหรับตัวอย่างลิงก์
เช่น สําหรับส่วนเสริมที่ระบุรูปแบบ URL example.com/cases
หากผู้ใช้ดูตัวอย่างลิงก์ https://www.example.com/cases/123456
ระบบจะแสดงผลเปย์โหลดกิจกรรมต่อไปนี้
JSON
{ "docs": { "matchedUrl": { "url": "https://www.example.com/support/cases/123456" } } }
ในการสร้างอินเทอร์เฟซการ์ด คุณต้องใช้วิดเจ็ตเพื่อแสดงข้อมูลเกี่ยวกับลิงก์ คุณยังสร้างการดําเนินการที่ให้ผู้ใช้เปิดลิงก์หรือแก้ไขเนื้อหาได้อีกด้วย ดูรายการวิดเจ็ตและการดําเนินการที่มีอยู่ได้ที่คอมโพเนนต์ที่รองรับการ์ดตัวอย่าง
วิธีสร้างชิปและการ์ดอัจฉริยะสําหรับตัวอย่างลิงก์
- ใช้ฟังก์ชันที่คุณระบุในส่วน
linkPreviewTriggers
ของทรัพยากรการทําให้ใช้งานได้ของส่วนเสริมหรือไฟล์ Manifest ดังนี้- ฟังก์ชันต้องยอมรับออบเจ็กต์เหตุการณ์ที่มี
docs.matchedUrl.url
เป็นอาร์กิวเมนต์และส่งคืนออบเจ็กต์Card
รายการเดียว - หากบริการของคุณต้องการการให้สิทธิ์ ฟังก์ชันนั้นจะต้องเรียกใช้ขั้นตอนการให้สิทธิ์ด้วย
- ฟังก์ชันต้องยอมรับออบเจ็กต์เหตุการณ์ที่มี
- ในการ์ดการเรียกแต่ละการ์ด ให้ใช้ฟังก์ชันเรียกกลับที่ใช้เพื่อให้อินเทอร์แอ็กทีฟของวิดเจ็ตสําหรับอินเทอร์เฟซ ตัวอย่างเช่น หากคุณใส่ปุ่มในอินเทอร์เฟซ ปุ่มนั้นควรมี
Action
ที่แนบมา รวมถึงฟังก์ชันการเรียกกลับที่ทํางานเมื่อคลิกปุ่ม
โค้ดต่อไปนี้จะสร้างฟังก์ชันเรียกกลับ caseLinkPreview
:
Apps Script
Node.js
Python
Java
คอมโพเนนต์ที่รองรับการ์ดตัวอย่าง
ส่วนเสริมของ Google Workspace รองรับวิดเจ็ตและการดําเนินการต่อไปนี้สําหรับการ์ดตัวอย่างลิงก์
Apps Script
ช่องบริการการ์ด | Type |
---|---|
TextParagraph |
วิดเจ็ต |
DecoratedText |
วิดเจ็ต |
Image |
วิดเจ็ต |
IconImage |
วิดเจ็ต |
ButtonSet |
วิดเจ็ต |
TextButton |
วิดเจ็ต |
ImageButton |
วิดเจ็ต |
Grid |
วิดเจ็ต |
Divider |
วิดเจ็ต |
OpenLink |
แอ็กชัน |
Navigation |
การดําเนินการ รองรับเฉพาะเมธอด updateCard เท่านั้น |
JSON
ช่องการ์ด (google.apps.card.v1 ) |
Type |
---|---|
TextParagraph |
วิดเจ็ต |
DecoratedText |
วิดเจ็ต |
Image |
วิดเจ็ต |
Icon |
วิดเจ็ต |
ButtonList |
วิดเจ็ต |
Button |
วิดเจ็ต |
Grid |
วิดเจ็ต |
Divider |
วิดเจ็ต |
OpenLink |
แอ็กชัน |
Navigation |
การดําเนินการ รองรับเฉพาะวิธี updateCard |
ตัวอย่างที่สมบูรณ์: ส่วนเสริมของกรณีการสนับสนุน
ตัวอย่างต่อไปนี้มีส่วนเสริม Google Workspace ที่แสดงตัวอย่างลิงก์ไปยังประวัติการช่วยเหลือและโปรไฟล์ของพนักงาน
ตัวอย่างนี้
- ตัวอย่างจะลิงก์ไปยังประวัติการช่วยเหลือ เช่น
https://www.example.com/support/cases/1234
ชิปอัจฉริยะจะแสดงไอคอนการสนับสนุน และการ์ดตัวอย่างจะมีรหัสกรณีและคําอธิบาย - แสดงตัวอย่างลิงก์ไปยังตัวแทนกรณีการสนับสนุน เช่น
https://www.example.com/people/rosario-cruz
ชิปอัจฉริยะจะแสดงไอคอนบุคคล และการ์ดตัวอย่างจะประกอบด้วยชื่อ อีเมล ตําแหน่งงาน และรูปโปรไฟล์ของพนักงาน - หากตั้งค่าภาษาของผู้ใช้เป็นภาษาสเปน ชิปอัจฉริยะจะแปล
labelText
เป็นภาษาสเปน
แหล่งข้อมูลเพื่อการนําไปใช้งาน
Apps Script
{
"timeZone": "America/New_York",
"exceptionLogging": "STACKDRIVER",
"runtimeVersion": "V8",
"oauthScopes": [
"https://www.googleapis.com/auth/workspace.linkpreview"
],
"addOns": {
"common": {
"name": "Preview support cases",
"logoUrl": "https://developers.google.com/workspace/add-ons/images/link-icon.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",
"localizedLabelText": {
"es": "Caso de soporte"
},
"logoUrl": "https://developers.google.com/workspace/add-ons/images/support-icon.png"
},
{
"runFunction": "peopleLinkPreview",
"patterns": [
{
"hostPattern": "example.com",
"pathPrefix": "people"
}
],
"labelText": "People",
"localizedLabelText": {
"es": "Personas"
},
"logoUrl": "https://developers.google.com/workspace/add-ons/images/person-icon.png"
}
]
}
}
}
JSON
{
"oauthScopes": [
"https://www.googleapis.com/auth/workspace.linkpreview"
],
"addOns": {
"common": {
"name": "Preview support cases",
"logoUrl": "https://developers.google.com/workspace/add-ons/images/link-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"
},
{
"runFunction": "URL",
"patterns": [
{
"hostPattern": "example.com",
"pathPrefix": "people"
}
],
"labelText": "People",
"localizedLabelText": {
"es": "Personas"
},
"logoUrl": "https://developers.google.com/workspace/add-ons/images/person-icon.png"
}
]
}
}
}