FormTalker Plugin

setup

npm ci
npm run dev

deploy

npm ci
npm run dev

how to use

FormTalker popup plugin

HTML インポート

<script type="module" src="/src/ft-plagin-popup/ft-plugin-popup.js"></script>
<script>
    // Initialize the chat plugin
    ChatConfig = {
        chatId: "sc-sample",
        zIndex: 9,
        useClickEffect: true,
    };
</script>

Options (ChatConfig)

• chatId： チャットID　※必須
• zIndex： zIndex変更する場合、default:9999
• mobileHeight： チャットボットのモバイル時の高さ、default:calc(100%)
• rightMargin： チャットボットの右側のマージン、default:0
• bottomMargin： チャットボットの下側のマージン、default:0
• useClickEffect： アイコンクリック時のエフェクト、default:true
• clickEffectTime： アイコンクリック時のエフェクト時間(ミリ秒)、default:5000
• isShowBtn： アイコンの表示、default:true
• isShowScaleBtn： 拡大・縮小ボタンの表示、default:true
• closePopupFn： チャットボットの閉じる処理、default:() => {}
• elementId： チャットボットiframe要素のID名、default:formtalker-frame

FormTalker Default Animation plugin

HTML インポート

<script type="module" src="/src/ft-plugin-animation/ft-plugin-animation.js"></script>
<script>
    // Initialize the chat plugin
    AniSelections = ["#open-popup"];
    AniConfig = {
        zIndex: 10,
        borderSelection: "#ft-popup",
        borderRadius: "25px",
    };
</script>

Options (ChatConfig)

• AniSelections： クリック時の発火させるElementのSelection　※必須
• AniConfig.zIndex ： zIndex変更する場合、default:99
• AniConfig.borderSelection ： 枠線効果適用のセレクター
• AniConfig.borderRadius ： 枠線効果適用時のRadius

Vue start

package install

$ npm install git+https://github.com/formtalker/plugin.git

import formTalkerPlugin from "formtalker-plugin";

formTalkerPlugin.loadChatbot({
    chatId: "sc-sample",
    zIndex: 99,
    useClickEffect: true,
});