ダウンロードしたサンプルファイルの中にあるchat-core.jsを編集することで、

以下のようにサンプルウィジェットの動作をカスタマイズ、御社用にご利用いただけます。

ダウンロード
w02.zip
zip ( 圧縮 ) ファイル 91.2 KB

Step 1: Download Source Code

  • Extract zip files

Step 2: Upload Source Code and Install

 

  • Upload All Folder to your hosting
  • Open file index.html flow code

+ Insert the code below into the header tag (Include Library and style)

<link rel="stylesheet" type="text/css" href="common/css/animate.css" />    
<link rel="stylesheet" type="text/css" href="common/css/jquery.mCustomScrollbar.min.css" />
<link rel="stylesheet" type="text/css" href="common/css/main.css" />
<link rel="stylesheet" type="text/css" href="css/ei-chat.css" />    
<script src="common/js/jquery.min.js" type="text/javascript"></script>     
<script src="common/js/jquery.mCustomScrollbar.concat.min.js" type="text/javascript"></script>  

 

+ Insert the code below into the footer (Include chat-core.js)

<script src="common/js/chat-core.js" type="text/javascript"></script>

 

+ Insert the code below into the you want display widget chat 

<!-- Screen 01 -->    
    <div id="w0101" class="ei-box-servey ei-step-first animated fadeInRight">
        <div class="ei-box-servey-header">
                <span class="ei-closer g"></span>
        </div>
        <div class="ei-box-servey-content">
                <a class="center" href="#"><img src="img/img1.png" alt="img alt" /></a>
        </div>
        <div class="ei-box-servey-footer">
                <a href="#" class="ei-call-to-action animated bounceIn"><span>Go</span></a>
                <div class="ei-info-first">ご新親お申し込みに関して</div>
                <div class="ei-info-second"><img src="img/icons/comment.svg" alt="chat" />チャットでのご相談はこちら</div>
                <div class="ei-info-action-footer">
                        <span>受付時間 9:00・24:30</span>
                </div>
        </div>
    </div>
    <!-- End screen 01 -->    

    <!-- Screen 02 -->   
    <div id="w0102" class="ei-box-servey ei-step-second animated fadeInRight">
        <div class="ei-box-servey-header b-b">
                <h1 class="ei-title-header">事前質問タイトル</h1>
                <span class="ei-closer g"></span>
        </div>
        <div class="ei-box-servey-content">
                <div class="ei-wrap-question ei-scroll">
                        <ul class="ei-wrap-question-list">                    
                        </ul>
                </div>
        </div>
        <div class="ei-box-servey-footer">  
            <div class="ei-show-notice animated bounceInUp">
                <p class="ei-content-notice"></p>               
            </div>              
                <a href="#" class="ei-next-step"><span>回答</span></a>
        </div>
    </div>
    <!-- End screen 02 -->  

    <!-- Screen 03 -->
    <div id="w0103" class="ei-box-chat animated fadeInRight">
        <div class="ei-box-chat-header">
            <div class="ei-chat-info">
                <div class="ei-chat-info-avatar">
                    <img src="img/img-default.jpg" alt="avatar" />
                </div>
                <div class="ei-chat-info-text">
                    <h1 id="ei-chat-info-text-title" class="ei-chat-info-text-title">---</h1>
                    <p class="ei-chat-info-text-des"><span id="emailCounter">---</span><span id="tellCounter">---</span></p>
                </div>
            </div>            
            <div class="ei-group-btn">
                <span class="ei-closer-chat"></span>
            </div>
        </div>
        <div class="ei-box-chat-content">
            <div class="ei-chat-content">
            </div>            
        </div>        
        <div class="ei-box-chat-footer">                      
            <div class="ei-show-notice animated bounceInUp">
                <p class="ei-content-notice"></p>               
            </div>
            <div class="ei-show-hint">      
                <span class="ei-closer-hint"></span>                  
                <div class="ei-content-hint">
                    <div class="hint-message trigger">
                        <p class="title-hint">質問はこちらでしょうか?</p>
                        <div class="hint-content">                           
                        </div>
                    </div>
                    <div class="hint-message faq">
                        <p class="title-hint">関連した記事</p>
                        <div class="hint-content">                            
                        </div>
                    </div>
                </div>
            </div>
            <div class="ei-chat-form">
                <input type="text" id="ei-message-input" class="ei-message-input" placeholder="Type and press [Enter]..." />       
                <span class="hint-endchat ei-closer-chat">End chat</span>
                <button type="button" class="ei-message-submit">Send</button>
            </div>
        </div>
        <!-- end chat -->
        <div class="ei-end-chat">
            <p>Are you sure you want to end this chat?</p>
            <div>
                <button type="button" class="cancel ei-btn">Cancel</button>
                <button type="button" class="endchat ei-btn ei-color white">End Chat</button>
            </div>
        </div>
    </div>
    <!-- End screen 03 -->  

    <!-- Screen 04 -->   
    <div id="w0104" class="ei-box-servey ei-step-four animated fadeInRight">
        <div class="ei-box-servey-header b-b">
            <h1 class="ei-title-header">事後アンケートタイトル</h1>
            <span class="ei-closer"></span>
        </div>
        <div class="ei-box-servey-content">
            <div class="ei-wrap-question ei-scroll">
                <ul class="ei-wrap-question-list">                      
                </ul>
            </div>
        </div>
        <div class="ei-box-servey-footer">     
            <div class="ei-show-notice animated bounceInUp">
                <p class="ei-content-notice"></p>               
            </div>           
            <a href="#" class="ei-next-step"><span>回答</span></a>
        </div>
    </div>
    <!-- End screen 04 -->

    <!-- Screen 05 -->
    <div id="w0105" class="ei-box-servey ei-step-thanks animated fadeInRight">
        <div class="ei-box-servey-header b-b">
                <h1 class="ei-title-header">ありがとう!!</h1>
                <span class="ei-closer g"></span>
        </div>
        <div class="ei-box-servey-content">
                <a class="center" href="#"><img src="img/img1.png" alt="img alt" /></a>
        </div>
        <div class="ei-box-servey-footer">         
                <a href="#" class="ei-next-step"><span>閉じる</span></a>
        </div>
    </div>
    <!-- End screen 05 -->   
        

 

Step 3: Setting 

  • Open file chat-core.js on folder common\js
  • Find the code below

 

//Common
var commonConfig={  
    clientAPI: 'your_Client_API',
    productID: 'your_Product_ID',
    urlAPI: 'http://delivery.eigyointelligence.com/',
    eventKeyDefault1: 'pv',
    eventKeyDefault2: 'popup',
    eventKeyDefault3: 'ask',
    eventKeyDefault4: 'cv',
    isShowSettingForm: false        
}

 

Injoy!

  • You can follow the information below to configure chat widgets at your disposal. Thank you!

 

 

共有設定

 

 

項目

説明
APIサーバURL  APIサーバURLを設定します。
API Key                                          

企業情報を設定します。

マネージメントサイトの企業情報画面のAPIキーを

コピーして、ここに貼って下さい。

商品ID

商品/サービスを設定します。マネージメントサイトの

商品一覧画面のIDををコピーして、ここに貼って下さい。


PopUpイメージ

 

 

項目

説明
イベントキー                                                                      

イベント発生APIでイベントキーをポップアップを指定してリクエストします。

マネージメントサイトのカスタムイベント設定画面のキーをコピーして、ここに貼って下さい。

ウィジェットサイズ  ウィジェットサイズを設定します。
イメージサイズ イメージサイズを設定します。
×ボタン表示フラグ ×ボタン表示の有無を設定します。デフォルト値:TRUE
デフォルト表示フラグ

ポップアップ表示の有無を設定、非表示設定の場合は

次からスタートします。デフォルト値:TRUE


事前切り分け質問

 

 

項目

説明
ウィジェットサイズ  ウィジェットサイズを設定します。
質問タイトル           画面タイトルを設定します。
×ボタン表示フラグ ×ボタン表示の有無を設定します。デフォルト値:TRUE
即時回答                                          

設問が1問の場合のみ設定有効、その場合は送信ボタンを

非表示にして回答選択と同時に 回答送信します。


問合せメインスレッド

 

 

項目

説明
ウィジェットサイズ   ウィジェットサイズを設定します。

カスタマーアバター

イメージのURL

カスタマーアバターを設定します。

企業ご担当者様

アバターイメージのURL

企業ご担当者様アバターを設定します。
無言トリガー間隔 無言トリガー間隔を設定します。単位:秒
会話間隔

会話のレスポンス間隔時間の設定、連続レスポンスを

発生させる際に、読み易いようにわざと時間間隔を

空けておくための設定。単位:秒

FAQテンプレート質問の

最大表示行数

 

特定単語トリガー質問の

最大表示行数

 
FAQテンプレートのタイトル FAQテンプレートのタイトルを設定します。
特定単語トリガーのタイトル 特定単語トリガーのタイトルを設定します。
会話終了ボタン表示 会話終了ボタン表示を有無を設定します。
×ボタン表示フラグ ×ボタン表示の有無を設定します。デフォルト値:TRUE

商品/サービスイメージの

表示フラグ

商品/サービスイメージの表示を有無を設定します。
窓口情報の表示フラグ 窓口情報の表示を有無を設定します。

事後アンケート

 

 

項目

説明
ウィジェットサイズ            ウィジェットサイズを設定します。
事後アンケートタイトル 画面タイトルを設定します。
×ボタン表示フラグ ×ボタン表示の有無を設定します。デフォルト値:TRUE

Thanks画面

 

 

項目

説明
ウィジェットサイズ                                            ウィジェットサイズを設定します。
イメージサイズ イメージサイズを設定します。
画面タイトル 画面タイトルを設定します。
×ボタン表示フラグ ×ボタン表示の有無を設定します。デフォルト値:TRUE
デフォルト表示フラグ ポップアップ表示の有無を設定します。デフォルト値:TRUE