オリジナルフォームで画像をアップロードする方法 
■目的
オリジナルフォームで画像を取得したい場合に使用します。
取得した画像は、受信BOX、1：1トーク内で確認ができます。

※画像を選択する際は、ファイルから選択するか、カメラ起動かで選ぶことができます。


■セット所要時間
10分


■サンプルコード 
フォームサンプルページ＞ 
フォームサンプルページダウンロード＞ 
※ソースコード確認方法 
windows：Ctrl + U  
mac　　：option + command + U 


■セットの流れ
オリジナルフォームの編集方法につきましてはこちら＞

（1）<form>タグに「enctype="multipart/form-data"」を指定する
例）
<form id="form-check" novalidate method="POST" action="###formurl###" enctype="multipart/form-data">

（2）画像添付用のフォームを作成
name属性は記載ルールに従ってご変更ください。
例）
<input type="hidden" name="col_8_title" value="添付画像">
<dt>添付画像<span>*</span></dt>
<dd>
	<label>
		<input type="file" name="col_8">
		<span>ファイルを選択して下さい</span>
	</label>
</dd>

（3）デザインの調整
サンプルページのスタイルに合わせる場合にご使用ください。

▼スタイル調整
.check input[type="file"]{
  display: none;
}

.check input[type="file"] + span {
  display: block;
  width: 100%;
  padding: 8px;
  font-size: 5vw;
  box-sizing: border-box;
  border: 1px solid #d8d8d8;
  border-radius: 3px;
  background: #fff;
  line-height: 1.4;
}
▼ファイル添付時の表示切替
<script>
	//添付画像のUI調整
	$('input[type="file"]').on('change', function () {
		var file = $(this).prop('files')[0];
		$(this).next().text(file.name);
	});
</script>

（4）フォーム送信後、取得した画像を「受信BOX」、「1：1トーク」内のLIFFで確認

▼受信BOX
▼1：1トーク内のLIFF
※画像のみ投稿可能となり、画像以外の場合は受け付けない為、空となります。
※画像のサイズは10MBが上限となります。それ以上の場合は受け付けない為、空となります。



ガイドの内容はあくまでもサンプルになります。 
そのまま使用できない場合は対応するフォームにあわせての編集をお願いします。 
 表示設定が正常にできない場合、ソースチェックの有償サポートも行っております。
 ご希望の場合は設定代行バナー、もしくはお問い合わせLINE、チャットワークよりご依頼をお願いします。
外部サイトのサンクスページからリダイレクトしてタグ付与する方法 
LIFFの外部サイト機能を使って、LPをLIFFで開くようにします。
サンクスページからオリジナルフォームへリダイレクトさせてタグを付与します。


【導線例】（※LIFF内） 
①【外部サイト】お客様LP
↓ 
②【外部サイト】確認ページ
↓ 
③【外部サイト】サンクスページ
↓
リダイレクト
↓ 
④【オリジナルフォーム】タグ付与
（※必要に応じてサンクスページの表示作成）
※スマホのみの施策となります。
PCで①外部サイトURLのLPにアクセスした際は④でタグ付与はできません。
またスマホでもLIFF以外から購入した場合は同様にタグ付与できません。
（1）①LPのURLをLIFFの外部サイトに設定
LIFFの外部サイト設定方法はこちら＞

↓

（2）③サンクスページにjavascriptでオリジナルフォームへリダイレクト設定
href内のLIFF呼び出しURLを変更する。
<script>
location.href="line://app/1656436409-●●●●●";
</script>
↓

（3）④オリジナルフォームにタグ付与の記述をコピペで追加
アクセス時にタグ付与、送信が行われます。
タグコード部分に付与したいタグコードをセットしてください。
<!-- 削除禁止 -->
<form id="form-name" method="POST" action="###cancellationurl###">

	<!-- 削除禁止 --><input type="hidden" id="useridfield" name="luid"><!-- 削除禁止 -->
	<!-- 削除禁止 --><input type="hidden" id="fid" name="fid" value="###fid###"><!-- 削除禁止 -->
	<!-- 削除禁止 --><input type="hidden" id="liffid" name="liffid" value="###liffid###"><!-- 削除禁止 -->
	<!-- 削除禁止 --><input type="hidden" id="bot_id" name="bot_id" value="###botid###"><!-- 削除禁止 -->
</form>
<!-- 削除禁止 -->
<!-- 削除禁止 --><input type="hidden" id="addtag"><!-- 削除禁止 -->
<!-- 削除禁止 -->
<script charset="utf-8" src="https://static.line-scdn.net/liff/edge/2/sdk.js"></script>
<script src="liff-starter.js"></script>
<script>
	window.onload = function (e) {
		liff.init({
				liffId: "###liffid###"
			}).then(() => {
				liff.getProfile().then(function (profile) {
					document.getElementById('useridfield').value = profile.userId;
				}).catch(function (error) {});
			})
			.catch((err) => {});
	};
</script>
<!-- 削除禁止 -->
<!-- 削除禁止 -->
<script>
	//タグ付与
	AddTag('タグコード');

	var alertmsg = function(){
		AddTagProc();
		//alert("3秒経過、タグ付与");
	}
	setTimeout(alertmsg, 3000);

	function AddTag(TagCode) {
		$("#addtag").val(TagCode);
	}

	function AddTagProc() {
		var uid = $("#useridfield").val();
		var fid = $("#fid").val();
		var tag = $("#addtag").val();
		var botid = $("#bot_id").val();
		$.ajax({
			type: "POST",
			url: "/api/tag/add",
			dataType: 'json',
			data: {
				"uid": uid,
				"fid": fid,
				"bot_id": botid,
				"tag_code": tag
			},
			success: function (j_data) {},
			error: function (XMLHttpRequest, textStatus, errorThrown) {},
			complete: function () {}
		});
	}

	function liffclose() {
		liff.closeWindow();
	}
</script>
<!-- 削除禁止 -->
▼検証済みカート　（最終検証日：2022/8/19） 
・shopify

※サンクスページのリダイレクト処理はカートに依存しているため カート側の仕様変更で使えなくなることがあります。

※サンプルフォーム（アラートは実装時に外してください。）
プレビュー＞
ダウンロード＞
【フォーム】2回目の申請をクッキー（アクセス履歴）を使って制限する 
オリジナルフォーム（LIFF）による申請後に、2回目のアクセスに対して申請をできないようにします。
ブラウザに申請済みのクッキーを保持し判別するようにします。
サンプルページをダウンロードし、設定を進めて下さい。


下記フォームサンプルページのソースコードと併せてご確認いただくとわかりやすいです。
> フォームサンプルページ
> 送信完了サンプルページ
DL：フォームサンプルページ

※ソースコード確認方法
windows：Ctrl + U
mac　　：option + command + U




（1）サンプルファイル内にあるjs.cookie.min.jsをjsファイルに格納
（2）index.htmlのhead部分に下記を追加
サンプルコード（コピー＆ペースト用）
<script src="js/js.cookie.min.js"></script>
<script>
	//アクセス制限
	$(function() {
		const applied = Cookies.get('applied');
		if(applied){
			$(".wrap").css('display','none');
			$(".wrap.applied").show();
		}
		return false;
	});
</script>


（3）index.htmlのbody内に制限時の表示を追加
テキストの内容などは適宜変更下さい。
クッキーがある場合にこちらが表示されます。
サンプルコード（コピー＆ペースト用）
<div class="wrap applied" style="display: none;">
	<section class="title">
		<h2>エントリー受付</h2>
	</section>

	<section class="complete">
		<p>恐れ入りますが、24時間は再申請できかねます。<br>エントリーにつきましては、24時間経ってから<br>手続きをお願い致します。</p>
		<div class="btn">
			<a class="blue" onclick="liffclose();">内容を確認したので閉じる</a>
		</div>
	</section>
</div>


（4）complete.htmlのhead部分に下記を追加
サンプルコード（コピー＆ペースト用）
<script src="js/js.cookie.min.js"></script>


（5）complete.htmlのbody閉じの上部分に下記を追加
使用するクッキーの保持のコメントアウト「//」を解除し、元の58行目はコメントアウトしてください。
サンプルコード（コピー＆ペースト用）
//クッキーセット
Cookies.set('applied', '申請中', {expires: 1/( 24 * 60 * 6)} );//10秒保持
// Cookies.set('applied', '申請中', {expires: 1/( 24 * 60)} );//1分保持
// Cookies.set('applied', '申請中', {expires: 1/ 24} );//1時間保持
// Cookies.set('applied', '申請中', {expires: 1});//1日保持
オリジナルフォーム(LIFF)で取得したデータをCSVでダウンロードする方法

①3BO
↓
②受信BOX
↓
➂フォーム・ステータス・条件で絞り込みを行う。
↓
④CSVダウンロードしたいデータにチェック
↓
⑤CSVエクスポート
↓
⑥アカウント名をクリック
↓
⑦ジョブリスト
↓
⑧CSVをダウンロード
※CSVファイルを開く際のパスワードはECAIログインパスワードと同じ
※CSVダウンロードのボタンが出るまで3分ほどかかる場合があります。ボタンが出ない場合はページをリロードしてください。

【フォーム】画像の追加方法 
下記フォームサンプルページを元に説明します。
フォームサンプルページをブラウザ上でソースコードをご確認いただくか、ファイルをダウンロードして内容をご確認ください。
＞フォームサンプルページ
＞フォームサンプルダウンロード

※ソースコード確認方法
対象ページをChromeブラウザで開いて下記操作を行ってください。
windows：Ctrl + U
mac：option + command + U




【編集ファイル】
index.html

①画像の挿入箇所に<figure></figure>で囲われている部分をコピー＆ペーストしてください。
②画像のパスを設定
※画像のパス（画像名）は文字化け防止のため、半角英数字にしてください。
③画像名を記入（表示はされません、設定なしでも可、altは日本語可）

サンプルコード（コピー＆ペースト用）

<figure>
	<div><img src="images/bnr3.png" alt="追加画像"></div>
</figure>
【オリジナルフォーム】ポップアップバナー設定

■見本

下記サンプルページを元に説明します。 
サンプルページのソースコードをブラウザ上でご確認いただくか、ファイルをダウンロードして内容をご確認ください。

サンプルページ＞
サンプルページダウンロード＞
※ソースコード確認方法
サンプルページをChromeブラウザで開いて下記操作を行ってください。
windows：Ctrl + U
mac：option + command + U


■仕様
・質問２の解約を選択すると、ポップアップバナーが表示されます。
・ポップアップバナーで解約が阻止された場合は指定のタグが付与されます。
・<!-- 削除禁止 -->部分はデータの送信に必要なので削除しないでください。


■編集ファイル：index.html

(1)ポップアップを発動させたい回答に「onClick="showModal();"」を設定

(2)ポップアップバナーの表示部分のHTMLを設定
①ポップアップバナー画像、ボタン画像設置
②完了バナー画像、閉じるボタン設置

(3) (1)で呼び出す「showModal()」、完了バナー(サンクスバナー)の挙動設定
フォーム離脱時にタグを付与する場合は、AddTagにタグコードを貼り付けてください。

（4）バナー部分のスタイルの設定
【解約・休止・サイクル変更・スキップ】エントリーフォームのテスト送信方法 
（1）コンテンツ　＞　LIFF
↓
（2）対象フォームの「LIFF呼び出しURL」をコピーする
↓
（3）1：1トークより友達登録している管理用アカウントや自分のアカウントを選択
 テキストメッセージに「LIFF呼び出しURL」をペーストして送信
↓
（4） ここからは実機でのLINE操作となります。
 友達登録しているスマホより送られたメッセージ確認
  「LIFF呼び出しURL」を開く
↓
（5）表示されたオリジナルフォームに内容を入力しエントリー（送信）する
↓
（6）送信結果は管理画面に戻り「受信BOX」よりご確認ください。

受信BOXの確認方法につきましてはこちらをご確認ください
Googleアナリティクスでオリジナルフォーム内のボタンをクリック計測する方法 
オリジナルフォーム（LIFF）で回答ボタンなどのクリックを計測したいときに活用できます。
ガイドはGoogleアナリティクスのGA4バージョンでの設定方法となります。

計測設定には、Googleアカウントの取得（GA4）、トラッキングタグの設置が必要になります。
上記がまだの方は、先にお済ませください。
Googleアカウントの取得、トラッキングタグの設置について＞


（1）対象のオリジナルフォームをダウンロードし、index.htmlを編集します。
編集方法についてはこちら＞

↓

（2）クリック計測したいinputタグに下記を記述
①～③は質問内容に合わせて変更してください。
onclick="gtag('event', '①クリック（解約）',
{'event_category': '②質問2',
'event_label': '③解約'

});"

↓

（3）正常に計測されますと、Googleアナリティクスのレポートのイベント表示で確認ができます。

また、探索メニューでより詳しく解析することも可能です。
詳しい解析にはディメンションの設定も必要なので、詳細につきましてはグーグルのサポートページをご確認下さい。
[GA4] ディメンションと指標はこちら＞
1：1トーク画面に表示されるLIFFの最大数

1：1トークの右サイドメニューにあるLIFFは最大5件までの表示になっております。

それ以上の表示は、右サイドメニュ【詳細】をクリックして個人詳細ページでご確認ください。

オリジナルフォームのチャットワーク、スプレッドシート通知 
■目的
オリジナルフォームで入力された内容をチャットワーク通知する方法の説明になります。
（※ECAIにも同時に送信されます）


■セット所要時間
60分


■セット方法
チャットワーク通知を行うためには、Googleアカウントとチャットワークアカウントが必要になります。
どちらも無料で作成できますので、まずはアカウントを作成してください。
Googleアカウント作成＞
チャットワークアカウント作成＞


【チャットワーク通知までの流れ】
①オリジナルフォーム送信
↓
②スプレッドシートへ記入
↓
③スプレッドシートが変更されたらチャットワークへ送信
↓
④チャットワークに通知される


（１）オリジナルフォームの送信設定

下記のサンプルページをもとに説明します。
フォームサンプルページ＞ 
フォームサンプルページダウンロード＞ 
※ソースコード確認方法 
windows：Ctrl + U  
mac　　：option + command + U 

オリジナルフォームの編集方法はこちら＞


①index.htmlにスプレッドシートに送信設定
※画像ファイルを送ることはできません。



【コピペ用】

//★スプレッドシートに送信設定
function OnPost(){
	const URL = "スプレッドシートのApps Scriptをデプロイした時のURL";
	
	//質問1，2の回答を取得
	const c1 = $('.q1 :radio:checked').val();
	const c2 = $('.q2 :radio:checked').val();

	let SendDATA = {
	"column_1" : c1,
	"column_2" : c2,
	};

	let postparam = {
	"method" : "POST",
	"mode" : "no-cors",
	"Content-Type" : "application/x-www-form-urlencoded",
	"body" : JSON.stringify(SendDATA)
	};

	//スプレッドシートに送信
	fetch(URL, postparam);
}
②送信時に「OnPost();」を呼び出す
（２）スプレッドシートの設定

①スプレッドシートの新規作成　＞　拡張機能　＞　Apps Script

↓

②Apps Scriptの設定
ここで一旦チャットワークへログインし、設定から「API Token」と「対象のルームID」を取得します

↓
Apps Scriptに戻り、「API Token」と「ルームID」をコピペします。
チャットワークへの送信処理はそれ以降の「doPost()」に設定します。
送信メッセージ部分は送信内容に合わせてご変更ください。



【コピペ用】

// 【編集対象】Chatwork API Token
const token = 'API Token';
// 【編集対象】登録情報を通知するグループチャットのルームID
const room_id = 'ルームID';

function doPost(e){
  let Sheet = SpreadsheetApp.getActiveSheet();
  let JsonDATA = JSON.parse(e.postData.getDataAsString());
  let currnetDate = new Date();  //現在の日時
  Sheet.appendRow([currnetDate,JsonDATA.column_1,JsonDATA.column_2]);

  // 送信データを個別に取得
  var val1 = JsonDATA.column_1;
  var val2 = JsonDATA.column_2;

  // チャットワークに送信するメッセージ
  var message = '';
  message +=  "[info][title]チャットワーク通知[/title]";
  message += "依頼日時: " + currnetDate + "\n";
  message += "【STEP１】" + val1 + "\n";
  message += "【STEP２】" + val2 + "\n";
  message += "[/info]";

  // Chatworkへ送信
  var client = ChatWorkClient.factory({token: token})
  client.sendMessage({room_id: room_id ,body: message});
}

↓
編集が終わりましたら保存します

③ライブラリの設定
ライブラリで下記スクリプトIDで検索し、ChatWorkClientを追加
スクリプトID: 1nf253qsOnZ-RcdcFu1Y2v4pGwTuuDxN5EbuvKEZprBWg764tjwA5fLav



④Apps Scriptの公開（デプロイ）
デプロイ　＞　新しいデプロイ　＞　設定　＞　ウェブアプリ


↓
説明：任意の管理名
ウェブアプリ：自分
アクセスできるユーザー：全員

↓
承認画面は初回のデプロイ時のみの作業となります。

↓
スプレッドシートを作成したアカウントを選択

↓
Advancedをクリック
（※ボタンが小さいので注意）

↓
Go to 「スプレッドシートのタイトル」リンクをクリック

↓
Allowを選択

↓
デプロイが成功すると、ウェブアプリのURLが発行されますので、これをコピペします。
ここまででスプレッドシートの設定は完了です。

↓
コピペしたURLをオリジナルフォームに設定します。
（１）の①に戻っていただき、index.htmlへURLを設定し保存後、オリジナルフォームをECAIへアップロードして下さい。




（３）送信確認
オリジナルフォームから送信して、チャットワークへ通知がきましたら設定は完了です。




ガイドの内容はあくまでもサンプルになります。  そのまま使用できない場合は対応するフォームにあわせて編集をお願いします。
   
またチャットワークへの通知設定の設定代行も行っております。
ご希望の場合は下記設定代行バナー、もしくはお問い合わせLINE、チャットワークよりご依頼をお願いします。
（目安）１設定：10,000円(税別)
【フォーム】マイクロコピーの追加 
上記のように質問内容のテキストより少し小さいフォントサイズでマイクロコピーを入れたい場合は、
下記コードをコピーして、挿入箇所へペーストしてください。
改行したい場合は<li>～</li>を増やします。


<ul class="note">
	<li>※こちらに表示したいテキストを記入してください。</li>
	<li>※こちらに表示したいテキストを記入してください。</li>
</ul>
※ class="note"でスタイルの調整を行っております。
フォーム内質問と設定col(name属性)の確認方法

（1）コンテンツ　＞　LIFF

↓

（2）対象フォーム　の　「フォーム修正」選択

↓

（3）すべてを開く

↓

（4）フォーム内質問とそちらに紐づいている設定col(name属性)の確認を行えます。
※二重に定義されていると、後に定義されているcolで上書きされ、一部受信が出来なくなります
オリジナルフォーム内の推奨画像サイズ、形式 
オリジナルフォームはHTMLを自由にデザインが可能なため、規定のサイズ、形式などはございません。

ただし画像データが非常に重かったり、サイズが大きすぎたりしますとユーザビリティーを損ないます。
推奨のサイズは以下になりますので、参考にしてください。

■引き止めバナー、継続促進バナー
・形式：jpg.png 

①正方形バナー（1：1）
・サイズ横×縦：1040×1040px 
※バナー下にボタンを設置する場合におすすめ

②縦型バナー
・サイズ横×縦：1040×1800px 
※スマートフォン１画面のおおよそ収まるサイズ

③縦型バナー大
・サイズ横×縦：1040×2800px 
※スマートフォン画面の約1.5スクロールのサイズ
https://gyazo.com/cbe746c9b921c5cb5278af4fefcbc5d5 


■ポップアップバナー（モーダルバナー）
・形式：jpg.png,gif 

①正方形バナー（1：1）
・サイズ横×縦：600×600px 

②縦型バナー（2：3）
・サイズ横×縦：600×900px
オリジナルフォームのPV数、ユニークユーザー数を計測する方法 
外部ツールのGoogleアナリティクスを使用することで計測ができます。

アナリティクスの機能は多機能にわたるため、ツールについての細かい使用方法につきましては割愛させていただきます。
知りたい情報はインターネットから取得してご対応下さい。


(1)Googleアカウントの作成
アカウント作成はこちら＞

↓

(2)アナリティクスにログイン
ログインはこちら＞

↓

(3)アナリティクスでサイト設定をする
サイト設定はこちら＞

↓

(4)サイト設定後、計測用のトラッキングタグをコピペしてください。
①対象のアカウント選択
②管理
③データストリーム
④(3)で設定したWEBサイトを選択
⑤トラッキングタグをコピペする
↓

(5)コピペしたコードを、オリジナルフォーム（LIFF）の「index.html」,「complete.html」のhead内に設置してください。

オリジナルフォームを編集するには下記ガイドを参照下さい。
既存のオリジナルフォーム（LIFF）のダウンロード方法
オリジナルフォーム（LIFF）のアップロード方法

↓

(6)設置後、ユーザーのアクセスが行われますとアナリティクスの管理画面に計測内容が表示されます。
PV数、ユニークユーザー数が計測できますので、マーケティングにご活用ください。
設置の設定代行(有償)も行っております。
ご希望の方は下記フォームからお問い合わせください。
Googleアナリティクス設定代行に関するお問い合わせはこちら＞
オリジナルフォーム（LIFF）の種類、設定について 
【フォームの種類について】
オリジナルフォーム（LIFF）は大きく下記の2種類に分けられます。
①解約・休止・サイクル変更フォーム
②その他のフォーム（本人確認フォーム含む）

①解約・休止・サイクル変更フォームで取得した情報はASSダッシュボード、受信BOXに反映されます。
②その他のフォームで取得した情報は受信BOXに反映されます。また本人確認フォームとして設定しますと、取得した情報を会員リストの顧客情報として反映することができます。


【設定方法について】
LIFFの設定画面でフォーム種類を選択し、保存してください。


【注意事項】
オリジナルフォームの編集画面で、現在アップロードされているフォームの種類が確認できます。
こちらのフォーム種類とLIFFの設定フォームは同じにしてください。
異なりますとオリジナルフォームから正常にデータを取得できません。

アップロードされているフォームの設定方法につきましては。各フォームの詳細設定ガイドをご参照ください。

⇒解約・休止・サイクル変更フォーム内のcol(name属性)の記載ルール

⇒本人確認フォーム内のcol(name属性)の記載ルール
タグを付けることができるアクション一覧

▼タグを付けることができるアクション一覧

・会員リスト（※1）
・タグの自動設定（※2）
・一斉配信メッセージ（※3）
・応答メッセージ（※3）
・ステップメッセージ（※3）
・リマインドメッセージ（※3）
・ポストバック（※4）
　┗カルーセル
　┗画像カルーセル
　┗ボタン
　┗選択ボタン
　┗クイックリプライ
　┗リッチメニュー
・1:1トーク（※5）
・広告リスト（※6）
・LIFF（オリジナルフォーム）（※7）


各アクションのタグ操作箇所は下記画像をご確認ください。

▼会員リスト（※1）


▼タグの自動設定（※2）


▼一斉配信メッセージ・応答メッセージ・ステップメッセージ・リマインドメッセージ（※3）


▼ポストバック（カルーセル・画像カルーセル・ボタン・選択ボタン・クイックリプライ・リッチメニュー）（※4）


▼1:1トーク（※5）


▼広告リスト（※6）


▼LIFF（オリジナルフォーム）（※7）
オリジナルフォームで、送信ボタンを押したらタグを付与する方法はこちら＞

フォームから外部サイトに遷移する前にタグを付与する方法 
下記フォームサンプルページを元に説明します。
フォームサンプルページをブラウザ上でソースコードをご確認いただくか、ファイルをダウンロードして内容をご確認ください。
＞フォームサンプルページ
＞フォームサンプルダウンロード

※ソースコード確認方法
対象ページをChromeブラウザで開いて下記操作を行ってください。
windows：Ctrl + U
mac：option + command + U





【仕様】
質問３を選択時に下記ポップアップバナーが表示されます。
「外部サイトへリンク」ボタンを押すと遷移する前に指定のタグを付与します。


【仕様詳細】
使用ファイル：index.html


（1）ポップアップバナーの設置
①表示バナーの１つ目を設置
②表示バナーの２つ目を設置、更に増やす場合は複製して同列に追加する。
③バナー表示画像設定
④閉じるボタン設定
⑤外部サイトへリンクボタン設定
⑥外部サイトへ離脱しない場合は変わりに完了バナーを使用する（今回は使用しない）

↓
（2）ポップアップバナーを表示させるイベントを設定
①質問１と質問３の取得に必要な変数をセットする
②質問３（申請種別）の選択内容を取得
③質問１（商品）の選択内容を取得
④全バナーを非表示
⑤条件分岐：解約かつ商品１を選択している
⑥２回表示できないように、初回表示にチェックを入れる
⑦指定のタグコードをセットする
⑧バナー１を表示させる
⑨モーダルウインドウを表示させる
⑩条件分岐：解約かつ商品２を選択している
⑪ ⑩の条件の場合に指定のタグコードをセットする
⑫ ⑩の条件の場合にバナー２を表示させる

↓
（3）バナークリック時の挙動設定
①バナー１の「外部サイトへリンク」をクリックした時
②バナーを非表示にする
③モーダルウインドウを閉じるボタンを無効にする
④ECAIにタグを送信する
⑤タグ送信後のしダイレクト先を設定
⑥バナー２の挙動設定
⑦「閉じる」ボタンを押下でモーダルウインドウ（ポップアップバナー）を閉じる

↓
（4）質問3選択時にshowModal();のクリックイベントを呼び出す設定をする

【解約・休止・サイクル変更・スキップ】申請フォームのHTMLファイル内容説明 
フォームファイル内にあるindex.html（入力ページ）の詳細説明です。
ソースコード内にコメントアウトで説明の記載があります。
下記フォームサンプルページのブラウザ上でソースコードをご確認いただくか、ファイルをダウンロードして内容をご確認ください。

＞フォームサンプルページ

※ソースコード確認方法
対象ページをChromeブラウザで開いて下記操作を行ってください。

windows：Ctrl + U
mac：option + command + U

＞フォームサンプルダウンロード
フォーム離脱時に、サンクスバナーを表示してタグを付与する方法 
画面操作途中におけるタグ付与設定が必要になります。
オリジナルフォームのHTMLファイル編集が必要となりますので、対象ファイルをダウンロードします。

HTMLファイルのダウンロード方法につきましては下記をご参照ください。
> 既存のオリジナルフォーム（LIFF）のダウンロード方法


下記フォームサンプルページのソースコードと併せてご確認いただくとわかりやすいです。
> フォームサンプルページ
DL：フォームサンプルページ

※ソースコード確認方法
windows：Ctrl + U
mac　　：option + command + U


ダウンロードが終わりましたらファイルを解凍し、index.htmlをご使用のテキストエディターで開きます。

設定方法としては、
 Javascriptのコードにおいて予め「AddTag」をcallしてタグをセットした上で、「AddTagProc」をcallしてください。
 例：AddTag("drGCNjCUEg0");
 例：AddTagProc();


【設定方法の詳細】

（1）付与されるタグは「id="addtag"」に格納します。
※サンプルフォームに関しては表示バナー部分のHTMLに記述しています。
↓
（2）バナー表示の際に、付与したいタグを記述した「AddTag("タグコード")」をcallする。
（バナー表示例）
↓
（3）サンクスバナー表示の際に「AddTagProc」をcallする。
※サンプルフォームに関しては「1000円割引」を押下するとサンクスバナーが表示されます。
（サンクスバナー表示例）
↓
（4）LIFFを閉じる場合、Javascriptのコードにおいて「liffclose」をcallしてください。

↓
（5）「AddTag()」「AddTagProc()」「liffclose()」関数についてはbody終了タグ上部にまとめて記述しておく
記述後ファイルの上書きを忘れずにしてください。
記述が終わりましたら、「オリジナルフォーム（LIFF）のアップロード方法」の手順に沿ってファイルをアップロードする。

付与したタグの動作確認方法は下記をご参照ください。
> 付与したタグの動作確認方法

【オリジナルフォーム】入力チェックの設定について 
■目的 
オリジナルフォームの入力チェックの設定についての説明

■セット所要時間 
10分

■セットの流れ
下記フォームサンプルページを元に説明します。 
フォームサンプルページのソースコードをブラウザ上でご確認いただくか、ファイルをダウンロードして内容をご確認ください。
フォームサンプルページ＞
フォームサンプルダウンロード＞

※ソースコード確認方法
対象ページをChromeブラウザで開いて下記操作を行ってください。

windows：Ctrl + U
mac：option + command + U




(1)必要ファイルは４つ
下記４ファイルを<head>内で読み込んでください。
（※ECAIのテンプレートを使用している場合、すでに設置されています。）
・jquery本体
・validationEngine.css
・validationEngine.js
・日本語化ファイル



（２）回答のclassに”validate[required]”を指定
※data-prompt-positionでアラート表示の位置を調整できます。



ガイドの内容はあくまでもサンプルになります。  そのまま使用できない場合は対応するフォームにあわせての編集をお願いします。   表示設定が正常にできない場合、ソースチェックの有償サポートも行っております。  ご希望の場合は設定代行バナー、もしくはお問い合わせLINE、チャットワークよりご依頼をお願いします。
【フォーム】チェックボックスの作り方（解約休止フォームタイプ）

■見本

下記フォームサンプルページを元に説明します。 
フォームサンプルページのソースコードをブラウザ上でご確認いただくか、ファイルをダウンロードして内容をご確認ください。
＞フォームサンプルページ
＞フォームサンプルダウンロード

※ソースコード確認方法
対象ページをChromeブラウザで開いて下記操作を行ってください。

windows：Ctrl + U
mac：option + command + U





フォームサンプルページの質問６が「2カラム・チェックボックスタイプ」になりますので、こちらをサンプルコードよりコピペしてご使用ください。
①の<section></section>部分をコピペする
②classは「q」を指定で初期非表示、その他必要に応じてclassを設定（サンプルでは「trigger」としてます。）
③送信用タイトル、type属性は「hidden」設定、name属性は前の質問から連番になるように指定、value属性は管理画面に出力されるタイトル
④質問ナンバーを指定
⑤質問テキストを指定
⑥class「col2」で2カラムを指定（※name属性のcolとは別物です）
⑦選択支を増やすときは<li></li>までをコピペで追加して増やす
⑧選択支内容を指定、type属性は「checkbox」設定、value属性は送信内容を指定
※name属性は前の質問から連番になるようにし、複数回答を取得できるように[]指定
※ data-prompt-position="topLeft"はバリデーションの表示位置を指定
⑨選択支の表示テキストを指定

フォームテスト環境の作成方法 
本番環境へアップロードする前に動作テストを行いたい場合は、テスト用のLIFFを別途ご登録頂いてテスト送信を行ってください。



（1）コンテンツ>LIFF　ページに移動
↓
（2）　「作成」ボタンをクリック
↓
（3）テスト用のLIFFを作成する
LIFF管理名には「テスト」などわかりやすくする
※解約・休止・サイクル変更に関わるフォームの場合は、「解約」「休止」「サイクル変更」の文字列をLIFF管理名に必ず入れて登録してください。
※解約・休止・サイクル変更に関わるフォーム以外の場合は、「解約」「休止」「サイクル変更」の文字列を含まないよう設定してください。

画面サイズを選択（特に指定のない場合は「Full」を選択）
オリジナルフォームにチェック、「保存する」をクリック
↓
（4）　作成したフォームの右側「フォーム編集」をクリック
↓
（5）「参照」ボタンをクリックしてテスト送信したいフォームデータを選択、「保存する」をクリック
フォームデータのダウンロード方法は下記を参照ください。
＞既存のオリジナルフォーム（LIFF）のダウンロード方法


↓
（6）　⑪プレビュー、⑫設問内容をご確認できます。
※【解約・休止・サイクル変更・スキップ】申請フォームの場合、ASSダッシュボードに「お客様申請」と「テスト申請」が混在する形となる為、「名前○○の申請は処理しない」など社内ルールの周知をしていただけたらと思います。

テスト送信につきましては下記を参照ください。
＞【解約・休止・サイクル変更・スキップ】エントリーフォームテスト送信方法

フォームアップロード後のチェック項目につきましては下記を参照ください。
＞【簡易版】フォームアップロード後のチェック項目

オリジナルフォーム（LIFF）の最大数

オリジナルフォーム（LIFF）の発行最大数は1LINEログインチャネルで30件までとなります。

30件を超えた場合はLIFFの登録ができなくなります。（使用しなくなったLIFFを削除することで追加できるようになります）

【オリジナルフォーム】チェックボックスの作り方

■見本

下記フォームサンプルページを元に説明します。 
フォームサンプルページのソースコードをブラウザ上でご確認いただくか、ファイルをダウンロードして内容をご確認ください。
フォームサンプルページ＞
フォームサンプルダウンロード＞

※ソースコード確認方法
対象ページをChromeブラウザで開いて下記操作を行ってください。

windows：Ctrl + U
mac：option + command + U




フォームサンプルページの質問３が「チェックボックスタイプ」になりますので、こちらをサンプルコードよりコピペしてご使用ください。
①ECAI側で表示されるタイトルを「value」に設定（フォームには表示されません）
②質問番号を指定
③質問テキストを指定
④name属性は前の質問から連番になるようにし、複数回答を取得できるように[]指定
⑤value属性は送信内容を指定（⑤⑥は同じだとわかりやすい）
⑥選択支の表示テキストを指定
選択支を増やすときは<li></li>までをコピペで追加して増やす



ガイドの内容はあくまでもサンプルになります。  そのまま使用できない場合は対応するフォームにあわせての編集をお願いします。   表示設定が正常にできない場合、ソースチェックの有償サポートも行っております。  ご希望の場合は設定代行バナー、もしくはお問い合わせLINE、チャットワークよりご依頼をお願いします。
BOT差し替え時に行うこと

BOT差し替えをした際に、引き継げない設定があります。

引き継げない設定はBOT差し替え後に、下記手順に沿って再設定してください。

▼引き継げない設定

【1】会員リスト
【2】個別予約メッセージ
【3】リッチメニュー
【4】タグ追従設定
【5】LIFF
【6】RPA設定


【1】会員リストの再設定（削除）
①会員＞会員リスト
↓
②全会員選択
↓
➂削除


【2】個別予約メッセージの再設定（削除）
④メッセージ＞個別予約メッセージ
↓
⑤削除


【3】リッチメニューの再設定（保存し直し）
⑥コンテンツ＞リッチメニュー
↓
⑦編集
↓
⑧何も変更せずに「保存する」

全リッチメニューに対し行う


【4】タグ追従設定の再設定（保存し直し）
⑨コンテンツ＞タグ追従設定
↓
⑩編集
↓
⑪何も変更せずに「保存する」

全リッチメニューに対し行う


【5】LIFFの再設定（新規作成）
⑫コンテンツ＞LIFF
↓
⑬再設定したいLIFFを「編集」
↓
⑭ダウンロード
↓
⑮LIFFを作成
　┗設定手順はこちら＞
　※設定手順「（2）」からを行い「⑭」でダウンロードしたファイルを選択する


【6】RPA設定（再設定）
⑯3BO>RPA設定
↓
⑰「⑮」で作成したLIFF（オリジナルフォーム）を選択
↓
⑱追加する
　┗自動解約処理の設定方法はこちら＞
　┗自動休止・スキップ処理の設定方法はこちら＞

RPA設定はフォームごとに設定が必要なため、「⑮」で作成したフォームに設定する必要があります。

LIFFに外部サイトを設定する方法

■目的
ウェブページをLINE上に表示したいときはLIFFの外部サイトを使用します。
LIFFとは？

■セット所要時間
3分

■セットの流れ

①　左サイドメニュー＞コンテンツ＞②作成

↓

③　LIFF管理名を入れる。お客様には表示されません。社内管理用です。

↓

④　画面サイズを設定　LINE内で何パーセントで見せるかです。視認性が良いのはFull（全画面）になるのでECAIでは全画面を推奨しています。作成後に後から編集可能です。

↓

⑤　外部サイトにチェックを入れて表示させたいURLを挿入

↓

⑥　保存を押して完了

LIFFの設定方法

LINE Front-end Framework（LIFF）とは

「LIFFとは何か」をひとことで表すと「ウェブページをLINE上に表示できる仕組み」です。ユーザー体験として外部リンクでもLINE内で表示されるので心地よく外部サイトを表示させることが可能になります。


LIFFの設定方法

①　左サイドメニュー＞コンテンツ＞②作成

↓

③　LIFF管理名を入れる。お客様には表示されません。社内管理用です。

↓

④　画面サイズを設定　LINE内で何パーセントで見せるかです。視認性が良いのはFull（全画面）になるのでECAIでは全画面を推奨しています。作成後に後から編集可能です。

↓

⑤　外部サイトにチェックを入れて表示させたいURLを挿入

↓

⑥　保存を押して完了

オリジナルフォームを送信後にトーク画面に戻る方法 
■目的
オリジナルフォーム送信後に完了ページを表示させずトーク画面に戻る方法です。

■セット所有時間
5分

下記フォームサンプルページを元に説明します。
サンプルページをブラウザ上でソースコードをご確認いただくか、ファイルをダウンロードして内容をご確認ください。
フォームサンプルページ＞
フォームサンプルダウンロード＞

※ソースコード確認方法
対象ページをChromeブラウザで開いて下記操作を行ってください。
windows：Ctrl + U
mac：option + command + U


■セットの流れ
サンプルページを例に説明をしていきます。
編集ファイル：complete.html

フォーム送信後に表示される完了ページ(complete.html)に、自動でLIFFを閉じる動作を入れます。
実際の閉じる動作はLINEのLIFF内でしか動作しないのでご注意ください。

（1）body閉じの上に下記２つのコードを追加
<!-- 削除禁止 -->
<script>
    liffclose();
</script>
<!-- 削除禁止 -->
※下記2つ目のコードは、フォーム内に既に記載がある場合は記載しなくてOKです
<!-- 削除禁止 -->
<script charset="utf-8" src="https://static.line-scdn.net/liff/edge/2/sdk.js"></script>
<script src="liff-starter.js"></script>
<script>
    window.onload = function (e) {
        liff.init({ liffId: "###liffid###" }).then(() => {
            liff.getProfile().then(function (profile) {
                document.getElementById('useridfield').value = profile.userId;
                //alert(profile.userId);
            }).catch(function (error) {
                //window.alert('Error getting profile: ' + error);
            });
        })
            .catch((err) => {
            });
    };
</script>
<script>
    function liffclose() {
        liff.closeWindow();
    }
</script>
<!-- 削除禁止 -->


（2）完了ページのコンテンツ部分は、コメントアウトか削除して非表示にする


ガイドの内容はあくまでもサンプルになります。
そのまま使用できない場合は対応するフォームにあわせての編集をお願いします。 
表示設定が正常にできない場合、ソースチェックの有償サポートも行っております。
ご希望の場合は設定代行バナー、もしくはお問い合わせLINE、チャットワークよりご依頼をお願いします。

申請種別の質問をフォーム内に2回以上使用する場合 
申請種別（col_1）はフォーム内に１つのみ設定できるというルールがあります。
そのため申請種別の質問を複数設置する場合は、最終回答が「col_1」に格納される必要があります。

col(name属性)の記載ルールは下記参照
⇒解約・休止・サイクル変更フォーム内のcol(name属性)の記載ルール


下記フォームサンプルページを元に説明します。
ブラウザ上でソースコードをご確認いただくか、ファイルをダウンロードして内容をご確認ください。
＞フォームサンプルページ
＞フォームサンプルダウンロード(16)

※ソースコード確認方法
対象ページをChromeブラウザで開いて下記操作を行ってください。
windows：Ctrl + U
mac：option + command + U



（1）申請種別にあたる「col_1_title」,「col_1」をtype="hidden"にて設置
↓
（2）col_1に格納するための呼び出し関数をJavascriptで設定
↓
（3）１つ目の申請種別に関する質問
　①col_6以降の任意の順番で設定
　②SetAppType();を呼び出して、選択内容をcol_1に格納する
↓
（4）2つ目の申請種別に関する質問
　①col_6以降の任意の順番で設定
　②SetAppType();を呼び出して、選択内容をcol_1に格納する（上書きされます）
タグコードとは？ 
タグコードとは、作成したタグに紐づくコードになります。
オリジナルフォーム内ではこちらを指定して使用してください。

「　会員　＞　タグリスト　」　で確認ができます。