ZendeskのWeb Widgetに値を事前設定する方法と注意点 #TypeScript

ZendeskのWeb Widget APIを利用したお問い合わせフォームをサイトに導入する機会があったのですが、事前入力の設定で反映されず、結構ハマりました。

実装される方のお役に立てればと思い、導入手順と、問題になったコードをメモしてみました。

Web Widgetとは

Zendeskには「Web Widget」という機能があります。この機能はAPIで提供されていて、簡単にサイトにお問い合わせフォーム、ライブチャット等のWeb Widgetを掲載できます。

Zendesk Web Widgetを埋め込む：Web Widgetの概要サイト
Core API - Web Widget - Zendesk Developer Portal：APIサイト

やりたかった事

やりたかった事は次の2点でした。

Web Widget APIを利用して、Webサイトにお問い合わせフォームのWidgetを掲載する
入力項目に取得済みのお客様情報 (名前、メールアドレス、ニックネーム、お客様ID) をWidgit APIを利用して入力済にした形で表示する

導入手順

1. Web Widgetの許可

Zendeskのアドミン画面でWidgetの利用を許可する必要があります。「Support=>設定(歯車)=>ウィジェット(サイドバー)=>カスタマイズ(タブ)」を選択し、「お問い合わせフォーム」を有効にします。
あわせてカスタムチケットフィールドの欄で表示したいカスタムチケットにチェックをいれます。

次に、「Support=>設定(歯車)=>ウィジェット(サイドバー)=>設定(タブ)」を選択し、keyを確認します。

「?key=」以下がキーになります。こちら別途メモしておきます。

<!-- Start of Zendesk Widget script -->
<script id="ze-snippet" src="https://static.zdassets.com/ekr/snippet.js?key=[ここがキーになります]"> </script>
<!-- End of Zendesk Widget script -->

2. パッケージのインストール

掲載するサイトはNuxt.jsとTypeScriptで構築していました。
npmで zendeskのパッケージを検索したところ、丁度Nuxt.js用のパッケージがあったのでこちらを利用してみました。

dansmaculotte/nuxt-zendesk: Nuxt.js module for Zendesk Web Widget

上記Setupにも記載されていますが、nuxt.config.jsに設定を追加します。

modules: [
    // 省略
    [
        '@dansmaculotte/nuxt-zendesk',
        {
            key: '先程メモしたキーを入力',
            settings: {}
        }
    ]
],

3. コードの組み込み

createdフックにWidget APIの「zESetting」「zE('webWidget', 'prefill’)」を利用し、定義します。
注意点は以下になります。

zESetting： カスタムフィールドの項目(ここでは「ニックネーム(id: 393484506943)」「お客様ID(id: 393484506944)」)に値を代入
zE('webWidget', 'prefill', data)： デフォルトのフィールドの項目 (お名前 (id: name)、email (id: email))に値を代入
createdフックに定義

created(): void {
    console.log(this.auth.name)
    window.zESettings = {
        webWidget: {
            contactForm: {
                fields: [
                    {
                        id: 393484506943, // ニックネーム
                        prefill: { '*': this.auth.name }
                    },
                    {
                        id: 393484506944, // お客様ID
                        prefill: { '*': this.auth.id }
                    }
                ]
            },
            launcher: {
                label: {
                    '*': 'お問い合わせ'
                }
            },
            color: { theme: '#ff6971', launcherText: '#ffffff' }
        }
    }

    window.zE('webWidget', 'prefill', {
        name: {
            value: `${this.auth.lastName} ${this.auth.firstName}` // お名前
        },
        email: {
            value: this.auth.email // メールアドレス
        }
    })
}

うまく動かなかったコード

当初「zE(‘webWidget:on’, ‘open’)」と「zE(‘webWidget’, ‘updateSettings’)」を利用し、mountedフックにデフォルトのフィールド項目とカスタムフィールドの項目をまとめて定義しました。

こちらのコードは動きませんでした。

mounted(): void {
    window.zE('webWidget:on', 'open', () => {
        window.zE('webWidget', 'updateSettings', {
            webWidget: {
                contactForm: {
                    fields: [
                        {
                            id: 'name', // お名前
                            prefill: { '*': `${this.auth.lastName} ${this.auth.firstName}` } // NOT work
                        },
                        {
                            id: 'email', // メールアドレス
                            prefill: { '*': this.auth.email } // NOT work
                        },
                        {
                            id: 393484506943, // ニックネーム
                            prefill: { '*': this.auth.name } // NOT work
                        },
                        {
                            id: 393484506944, // お客様id
                            prefill: { '*': this.auth.id } // NOT work
                        }
                    ]
                }
            }
        })
    })
}

Zendeskコミュニティで検索したところ、同様に悩まれている方がいました。

Unable to prefill custom form fields via command – Zendeskヘルプ

ZendeskのBryan Flynnさんがコメントしていますが、「zE(‘webWidget’, ‘updateSettings’)」を利用した値の代入はできないようです。

ご注意ください。