Web Chatbot Client

Bot Backend: Dialogflow V1 Api
Chat Window Style: Popup
Star Fork

Deployment

Copy the webchat_client.js file from the dist folder to your static directory and add the following code

Note: Currently it only supports the V1 api of dialogflow. Support for V2 will be added soon.

<span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">id</span><span class="pun">=</span><span class="atv">"webchat_client"</span><span class="tag">&gt;&lt;/div&gt;</span><span class="pln"> </span><span class="tag">&lt;script</span><span class="pln"> </span><span class="atn">type</span><span class="pun">=</span><span class="atv">"text/javascript"</span><span class="pln"> </span><span class="atn">src</span><span class="pun">=</span><span class="atv">"{Path}/webchat_client.js"</span><span class="tag">&gt;&lt;/script&gt;</span><span class="pln"> </span><span class="tag">&lt;script</span><span class="pln"> </span><span class="atn">type</span><span class="pun">=</span><span class="atv">"text/javascript"</span><span class="tag">&gt;</span><span class="pln"> </span><span class="kwd">var</span><span class="pln"> config </span><span class="pun">=</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> color</span><span class="pun">:</span><span class="str">"#4d7e80"</span><span class="pun">,</span><span class="pln"> title</span><span class="pun">:</span><span class="str">"Demo Bot"</span><span class="pun">,</span><span class="pln"> style</span><span class="pun">:</span><span class="lit">1</span><span class="pun">,</span><span class="pln"> buttonOpen</span><span class="pun">:</span><span class="str">"help"</span><span class="pun">,</span><span class="pln"> backend</span><span class="pun">:</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> </span><span class="str">"type"</span><span class="pun">:</span><span class="str">"dialogflow_v1"</span><span class="pun">,</span><span class="pln"> </span><span class="str">"token"</span><span class="pun">:</span><span class="str">"&lt;your_dialogflow_token&gt;"</span><span class="pln"> </span><span class="pun">}</span><span class="pln"> </span><span class="pun">}</span><span class="pln"> $</span><span class="pun">(</span><span class="pln">document</span><span class="pun">).</span><span class="pln">ready</span><span class="pun">(</span><span class="kwd">function</span><span class="pun">(){</span><span class="pln"> webchat</span><span class="pun">(</span><span class="pln">config</span><span class="pun">);</span><span class="pln"> </span><span class="pun">})</span><span class="pln"> </span><span class="tag">&lt;/script&gt;</span><span class="pln"> </span>

The style parameter can take two options: 0 for popup and 1 for slide