互動式畫布 Canvas 是以 Google 助理建構的架構，可讓開發人員為對話動作新增視覺效果豐富的體驗。這項視覺化體驗是 Google 助理為了回應對話中的使用者而傳送的互動式網頁應用程式。有別於 Google 助理對話中內嵌的傳統豐富回應，互動式 Canvas 網頁應用程式會以全螢幕網頁檢視模式轉譯。
如果想在動作中執行下列任一操作，建議您使用互動式畫布：
- 製作全螢幕視覺效果
- 建立自訂動畫和轉場效果
- 視覺化呈現資料
- 建立自訂版面配置和 GUI
支援的裝置
互動式裝置目前支援下列裝置：
- 智慧螢幕
- Google Nest Hub
Android 行動裝置 (不含平板電腦)
運作方式
使用互動式畫布的動作，運作方式與一般的對話操作類似。使用者仍可透過 Google 助理進行後置對話，進而達成目標。不過，對話中的 Canvas 動作會傳送回應，開啟全螢幕網頁應用程式，而不是在對話中傳回回覆。使用者會持續透過語音或觸控方式與網頁應用程式互動，直到對話結束為止。
使用互動畫布的「動作」有幾個元件：
- 對話動作：使用對話介面來完成使用者要求的動作。互動式 Canvas 動作會使用網頁檢視畫面來轉譯回應，而非複合式資訊卡或簡單的文字和語音回應。對話動作會使用下列元件：
- Dialogflow 代理程式：是 Dialogflow 中的專案，您可以自訂要和動作使用者共用的專案。
- Fulfillment：以 Webhook 形式部署的程式碼，實作 Dialogflow 代理程式的對話邏輯，並與網頁應用程式進行通訊。
- 網頁應用程式：具有自訂視覺功能的前端網頁應用程式，你的動作會在對話期間回應。您可使用 HTML、JavaScript 和 CSS 等網路標準建構網頁應用程式。
對話動作和網頁應用程式會透過以下方式彼此通訊：
- Interactive Canvas API：在網頁應用程式中加入的 JavaScript API，啟用網頁應用程式與對話動作之間的通訊。
HtmlResponse：包含網頁應用程式和資料傳遞的回應。您可以使用 Node.js 或 Java 用戶端程式庫傳回HtmlResponse。
為了說明互動式畫布的運作方式，請參考名為 Cool Colors 的假設動作，將裝置螢幕的顏色變更為使用者指定的顏色。使用者叫用動作後，流程如下：
- 使用者向 Google 助理裝置說「
Turn the screen blue」。 - Actions on Google 平台會將使用者的要求轉送至 Dialogflow，以便比對意圖。
- 相符意圖的執行要求，並將
HtmlResponse傳送至裝置。如果尚未載入網頁應用程式，裝置會使用網址載入網頁應用程式。 - 網頁應用程式載入時，會使用
interactiveCanvasAPI 註冊回呼。接著，data物件的值會傳入網頁應用程式的註冊onUpdate回呼。在我們的範例中，執行要求中的data包含的變數，其變數值為blue。HtmlResponse - 網頁應用程式的自訂邏輯會讀取
HtmlResponse的data值，並做出已定義的變更。在此範例中，螢幕會轉為藍色。 interactiveCanvas會將回呼更新傳送至裝置。
後續步驟
如要瞭解如何建構互動式 Canvas 動作，請參閱建構總覽頁面。
如要查看完整的互動式 Canvas Action 的程式碼，請參閱範例。