qualva(クオルバ)のチャットボットを設置する

設置方法は2つあります。

ページ内の要素に設置する
ポップアップに設置する

ページ内の要素に設置する

Version編集画面＞Widget管理＞以下ウィジェットを追加
1. カテゴリー：埋め込み
2. Widget名. ：qualva（クオルバ）埋め込み
scriptタグの移動と編集
1. 「タグ設定<body>」にコードを1~28行目をカット＆ペースト
```
<script src="https://form.qualva.com/qtag?id=XXXX"></script>
```
2. 「XXXX」部分にプロジェクトIDをいれてください
<a>タグ内にテキストや画像を設置
1. qualvaの出し分けを行う場合はclass="qualvaBtn"を対象のclass名に変更してください。
```
例：<a class = "qualva側のclass名に変更する" data-sb-tracking=“true” > < img src = "画像のURL" > </a>
```
  ※「data-sb-tracking=“true”」はクリック計測のために削除しないようご注意ください

ポップアップに設置する

※追従型ポップアップのみで対応しております。

ポップアップの設定画面にある、「HTML」欄を選択

<HTML>に以下のコードを挿入

< ! --チャット開始ボタンのタグに「onclick = "qualvaCTA.click()"」を入力-- > < a onclick = "qualvaCTA.click(), closePopup()" > < img src = "任意の画像のURL" data - test = "" class = "" data - reactroot = "" / > < / a >

<js>に以下のコードを挿入

/* チャット用scriptのURLを入力 */  
const scriptSrc =  'クオルバの設置URL' ;  
/* チャット用のクラスを入力 */  
const btnClass =  'qualvaBtn2' ;  
const parentDoc = window . 親。ドキュメント;  
const popupRoot = parentDoc . getElementById ( 「固定ポップアップ ルート」) ;  
配列。from ( popupRoot . querySelectorAll ( 'a > iframe' ) ,  el  => el. スタイル。pointerEvents =  'all' ) ;  
var qualvaCTA ;  
if ( ! parentDoc.querySelector ( ' . ' + btnClass ) ) { qualvaCTA  =ドキュメント. createElement ( 'a' ) ;  クアルバクタ。classList = btnClass ;  クアルバクタ。スタイル。ディスプレイ= 「なし」;  popupRoot 。  appendChild ( qualvaCTA ) ;  
} else { 
qualvaCTA =親ドキュメント. querySelector ( '.'  + btnClass ) ;  
}  
if ( ! parentDoc . querySelector ( 'script[src="'  + scriptSrc +  '"]' ) ) {  let tag = document . createElement ( 「スクリプト」) ;  タグ。ソース=scriptSrc ;  firstScriptTag = parentDocとします。getElementsByTagName ( 「スクリプト」) [ 0 ] ;  firstScriptTag . 親ノード. insertBefore (タグ、 firstScriptTag ) ;  
}  
let  closePopup  =  ( )  => popupRoot . querySelector ( "._3xv8I4wzXynCMrx5__vZyn" ) . ( )をクリックします。

▼qualva（クオルバ）のCVをSquad beyondに反映する
https://knowledge.squadbeyond.com/improve-ad-effect/integrate-tool/qualva