1.ライブラリを設置

CalPushレポート画面にログインします。
for Web画面の「ウェブ設定」より、お客様専用のCalPushライブラリのJavaScriptコードを取得して、コピーします。

コピーしたJavaScriptコードをウェブサイトのHTMLに貼り付けます。

2.イベント情報の追加

カレンダー登録に必要なイベント情報をHTMLのdivタグに記載します。
CalPushタグを簡単に生成するためのツールも用意しておりますので、以下ボタンよりお試しください。

以下は、CMS等に手動でイベント情報を追加する場合の例を記載します。
【例】
イベント情報
タイトル：IoTセミナー
開催日時：2017年3月21日　14:00～17:00
開催場所：幕張メッセ
内容：IoTの概念から実際のデバイスを使用してIoT的な体験まで、IoTを支える基本的な技術及びその全体像を理解でき、身近な環境の中でのIoTの可能性を深めることが出来るセミナーです。
HTMLの記載例

<div class="event">
            <button class="event_button">カレンダーへ登録</button>
            <div style="display: none">
            <div class="event_title"> IoTセミナー</div>
            <div class="event_location">幕張メッセ </div>
            <div class="event_datetime">2017/03/21 14:00～2017/03/21 17:00</div>
            <div class="event_remind">30m</div>
            <div class="event_content"> IoTの概念から実際のデバイスを使用してIoT的な体験まで、
            IoTを支える基本的な技術及びその全体像を理解でき、身近な環境の中でのIoTの可能性を
            深めることが出来るセミナーです。</div>
          </div>

上記のように記載することで、CalPush導入サイト上に1つのカレンダー登録ボタンの配置が完了となります。
このボタンをクリックすることで、設定したイベント情報をユーザーのカレンダーに登録されます。
また、お客様のニーズに応じて同じサイトにいくつでもカレンダー登録ボタンを配置することができます。

テストサイト

以下にお客様毎のテストサイトがあります。導入の参考にしてください。
※表示されていない場合は新規カスタマイズ設定を追加ください

1. CalPushレポートにログインしてください。

2. [for Web]-[確認]を選択してください。

3. ソースを表示することで、CalPush導入例を確認可能です。

リクエストパラメタを利用する方法

CalPush for Webには、CalPushタグを作成せずにリクエストパラメタをご指定頂くことでもご利用頂けます。

登録用URL
https://calpush.addirect.promise-mail.com/calpushCore/google/rec_s.php
※rec_s.php を rec_t.php、rec_m.php に変更することによって、カレンダー登録画面のデザインを変更できます。
※パラメータの長さはHTTPのGETメソッドで転送できるデータ量に準拠します。CalPush for Web側では制限しません。

パラメータ
■ アカウントID（必須）
　　customer、フォーマット：テキスト
■ イベントのタイトル（必須）
　　title、フォーマット：テキスト
■ イベントの内容
　　details、フォーマット：テキスト
■ イベントの場所
　　location、フォーマット：テキスト
■ イベントの開始時間（必須）
　　start、フォーマット：yyyymmddThhmm、半角英数字
　　例）20181115T1000
■ イベントの終了時間
　　end、フォーマット：yyyymmddThhmm、半角英数字。イベントの開始日時より過去の日時を設定することはできません。
　　例）20181115T1800
■ 通知時間1
　　remind1、分単位：〜m、時間単位：〜h、日単位：〜d
　　例）1d
■ 通知時間2
　　remind2、分単位：〜m、時間単位：〜h、日単位：〜d
　　例）2h

URLとパラメータ設定
https://calpush.addirect.promise-mail.com/calpushCore/google/rec_s.php?customer=XXX&title=タイトル&details=内容&location=場所&start=開始時間&end=終了時間&remind1=リマインド1&remind2=リマインド2

記入例：

<a href="https://calpush.addirect.promise-mail.com/calpushCore/google/rec_s.php?customer=XXX&title=IoTセミナー&details=IoTの概念から実際のデバイスを使用してIoT的な体験まで、IoTを支える基本的な技術及びその全体像を理解でき、身近な環境の中でのIoTの可能性を深めることが出来るセミナーです。&location=幕張メッセ&start=20181115T1000&end=20181115T1800&remind1=1d&remind2=2h" target='_blank'>カレンダー登録</a>

過去の日付ボタンを非表示にする

Scriptコードとタグに name="calpush_event" 属性を設定することで、過去の日付ボタンを非表示にすることが出来ます。

Scriptコードの追加

<script type="text/javascript" src="https://calpush.addirect.promise-mail.com/calpushCore/calpush_chk_date.js"></script>

<a class="calpush_btn2" name="calpush_event" href="https://calpush.addirect.promise-mail.com/calpushCore/google/rec_s.php?customer=test2&title=IoTセミナー&location=幕張メッセ&start=20181114T1000&end=&details=IoTの概念から実際のデバイスを使用してIoT的な体験まで、IoTを支える基本的な技術及びその全体像を理解でき、身近な環境の中でのIoTの可能性を深めることが出来るセミナーです。&remind1=1d&remind2=2h" target='_blank'>カレンダー登録</a>

その他

CalPushには、「複数回リマインド」、「一括登録」、「繰返しイベント」などなど、柔軟に設定可能な項目が数多く存在します。
詳細は以下資料をご確認ください。
CalPush機能仕様書