open-index/open-npm huggingface dataset:
npm package: @formtalker/formtalker-plugin
Description: ## setup
Latest version: 1.0.10

# FormTalker Plugin

## setup

```sh
npm ci
npm run dev
```

## deploy
```sh
npm ci
npm run dev
```

## how to use
### FormTalker popup plugin
#### HTML インポート

```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

<hr>

### FormTalker Default Animation plugin

#### HTML インポート

```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

<hr>

### Vue start

#### package install
```sh
$ npm install git+https://github.com/formtalker/plugin.git
```

```js
import formTalkerPlugin from "formtalker-plugin";

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


```