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

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

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

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

- [Zendesk Web Widgetを埋め込む](https://www.zendesk.co.jp/embeddables/web-widget/)：Web Widgetの概要サイト
- [Core API \- Web Widget \- Zendesk Developer Portal](https://developer.zendesk.com/embeddables/docs/widget/core)：APIサイト

![](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/31885/ae466f69-959b-00be-b6db-77acbab3dc37.gif)

## やりたかった事

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

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

![](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/31885/49be965d-c10e-fc8c-1c9d-b43873117140.png)

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

![](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/31885/62b8aa12-41cf-2a61-20bc-9b3b03f6475e.png)


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

![](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/31885/8c2f3e22-8d01-302e-10bb-f45c173d3609.png)


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

```html
<!-- 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](https://github.com/dansmaculotte/nuxt-zendesk)

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

```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<object>)：** デフォルトのフィールドの項目 (お名前 (id: name)、email (id: email))に値を代入
 - createdフックに定義

```js
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フックにデフォルトのフィールド項目とカスタムフィールドの項目をまとめて定義しました。

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

```js
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ヘルプ](https://support.zendesk.com/hc/ja/community/posts/360037009994-Unable-to-prefill-custom-form-fields-via-command)

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

ご注意ください。