営業チームなど、Kintoneをメインで使っているメンバーが、CSに関する情報を確認するためにGainsightにログインしてカンパニーを特定して確認する、という運用だと、どうしても切り替え時に体験が途切れてしまいます。

Kintoneの中で、Gainsightにログインし直すことなく、そのままデータを参照したり更新できると、業務効率が上がりますね。

この記事では、Kintoneの中でC360を表示する方法をご紹介します。

Kintoneの中にC360を表示する

Kintoneのスペース項目を使い、Kintoneの中にiframeのC360のウェブ画面を埋め込みます。

アプリのフォーム編集画面で、二つの項目を作成します（後で使うJavascriptでは、二つの項目のフィールドコードと要素IDがこの通りに設定されている前提で作られています）。

① 文字列（１行）。フィールドコード：gsid

　埋め込みたいC360のgsidを保存しておく項目です。

② スペース。要素ID：C360

　実際にC360の画面が埋め込まれる場所です。

JavaScript / CSSでカスタマイズ画面で、以下のJavascriptファイルをアップロードします。

＊7行目のBASE URL内にある{ドメイン名}を、貴社でご利用中のGainsightのURLに合わせて変更してください。

(function () {
  'use strict';

  // ===== 設定 =====
  var SPACE_ID = 'C360';   // スペースフィールドの要素ID
  var FIELD_GSID = 'gsid'; // GSIDのフィールドコード
  var BASE_URL =
    'https://{ドメイン名}.gainsightcloud.com/v1/ui/customersuccess360'
    + '?cid={gsid}'
    + '&isNativeWidget=true'
    + '&height=1000'
    + '&showSideNav=false'
    + '&showHeader=false';
  var IFRAME_HEIGHT = '1000px';
  // =================

  // レコード詳細画面で動作
  kintone.events.on('app.record.detail.show', function (event) {
    var space = kintone.app.record.getSpaceElement(SPACE_ID);
    if (!space) return event;

    // 二重挿入防止
    if (space.dataset.inited) return event;

    var rec = event.record || {};
    var gsid = (rec[FIELD_GSID] && rec[FIELD_GSID].value)
      ? String(rec[FIELD_GSID].value).trim()
      : '';

    if (!gsid) {
      var msg = document.createElement('div');
      msg.textContent = 'GSID が未入力のため、C360画面を表示できません。';
      msg.style.color = '#d00';
      msg.style.margin = '8px 0';
      space.appendChild(msg);
      space.dataset.inited = '1';
      return event;
    }

    // URLにGSIDを差し込み
    var url = BASE_URL.replace('{gsid}', gsid);

    // iframeを生成して挿入
    var ifm = document.createElement('iframe');
    ifm.src = url;
    ifm.style.width = '100%';
    ifm.style.height = IFRAME_HEIGHT;
    ifm.style.border = '0';

    space.appendChild(ifm);
    space.dataset.inited = '1';

    return event;
  });

})();

保存後、アプリの更新をして、gsidにGainsightのカンパニーのgsidを入れるとC360が表示されます。

gsidフィールドにgsidを入れておく必要があるので、データ一括インポートなどであらかじめ入力しておきましょう。

この連携は画面を埋め込むもので、データは連携されていません。

データを連携していないため、Kintoneの中でGainsightのデータを使ったレポートやワークフローなどを活用することはできません。

データを連携させる場合は、APIや、TROCCOなどのETLツールを使って実装する必要があります。