zendeskのフォームをサイトに設置する

zendeskを統合した印象はすごい簡単だった
必要以上の機能はだいたいそろっている

アカウント準備

zendeskアカウント作成（30日間トライアル有り）

サポート(feedback)のフォームを作成

設定(左下の歯車) > チャネル > Feedbackタブ

• 一般設定 -> タブのタイトル、位置、色など
• 詳細なカスタマイズ -> [お困りの点を教えてください。]などの文言の変更

コードスニペットをプレビューして取得

以下のようなコードスニペットが出力される

<script type="text/javascript" src="//assets.zendesk.com/external/zenbox/v2.6/zenbox.js"></script>
<style type="text/css" media="screen, projection">
  @import url(//assets.zendesk.com/external/zenbox/v2.6/zenbox.css);
</style>
<script type="text/javascript">
  if (typeof(Zenbox) !== "undefined") {
    Zenbox.init({
      dropboxID:   "20123456",
      url:         "https://username.zendesk.com",
      tabTooltip:  "サポート",
      tabImageURL: "https://assets.zendesk.com/external/zenbox/images/tab_ja_support.png",
      tabColor:    "black",
      tabPosition: "Left"
    });
  }
</script>

変更の度にフォームを作成し直してdropboxIDを差し替えるのが少し面倒
タブの画像、ツールチップの変更 -> tabTooltip, tabImageURL

bootstrapがあっても問題なく動いた

注意点

デフォルトではrailsのturbolinksの2ページ目以降非対応

編集、更新はURL直接入力でうまくいったこともあったがあまりうまく読み込まれないので使えない
https://username.zendesk.com/account/dropboxes/9999999/edit (9999999はdropboxID)

ログインユーザーのEメールアドレス、名前をフォームにセットする

    Zenbox.init({
      ...
      tabPosition: "Right",
      requester_email: "[e-mail]",
      requester_name: 'Test Test'
    });

Railsの場合(erb)

    Zenbox.init({
      ...
      tabPosition: "Right",
      requester_email: "<%= current_user && current_user.email %>",
      requester_name: "<%= current_user && current_user.full_name %>"
    });

Pre-populate name, email, etc.

タブの位置を調整する

以下のようなCSSを外部の（自分で管理している）cssなどで上書きする必要がある
（zendeskが出力するcssより後ろで読み込んで定義する）

# zenbox_tab {
  top: 80% !important;
}

スニペット内に追加するのも良い

<script type="text/javascript" src="//assets.zendesk.com/external/zenbox/v2.6/zenbox.js"></script>
<style type="text/css" media="screen, projection">
  @import url(//assets.zendesk.com/external/zenbox/v2.6/zenbox.css);
  #zenbox_tab {
    top: 80% !important;
  }
</style>
<script type="text/javascript">
  if (typeof(Zenbox) !== "undefined") {
    Zenbox.init({
  ...

注意点

紛らわしかったのが、詳細なカスタマイズ > カスタムCSS
でタブの位置の変更できるかと思ったができない

ここではフォームの中のカスタマイズのみできる（おそらくiframe内のみ有効）

参考

Dropbox CSS override (position)
タブの位置を調整する