Getting Started

You can use our javascript based webwidget and use it on your website. We always aim to support every response type across all channels for convenience. Our widget payload is 341Kb and it's hosted on Cloudflare CDN for fast access times.

Installation

You can use Web Widget Settings in chatbot dashboard to easily customise your widget. Everything from color palette to header settings are customiseable.

A fully customised widget code looks like this:

<script>
     window.apiplugSettings = { 
     bot_id: "E2LGaPoIISHvzDre", 
     style_chat_background_color: "#F2F5F8", 
     style_chat_window_width:  "100%", 
     style_chat_window_height:  "100%", 
     style_message_bubble_color: "#9badbb", 
     style_message_bubble_text_color: "#FFFFFF", 
     style_reply_bubble_color: "#e3e3e4", 
     style_reply_bubble_text_color: "#000000", 
     style_date_text_color: "#434651", 
     style_send_button_background_color: "#F2F5F8", 
     style_send_button_text_color: "#94C2ED", 
     style_text_area_background_color: "#FFFFFF", 
     style_chat_bottom_border: "undefined", 
     style_overlay_background_color : "#000000", 
     style_overlay_text_color : "#FFFFFF", 
     style_start_button_background_color : "#e3e3e4", 
     style_start_button_text_color: "#000000", 
     start_button_message: "Get Started" 
   }; 
 </script> 
 <script> 
 (function(){ 
 	function apiplug(){ 
 	var s = document.createElement('script'); 
 	s.type = 'text/javascript'; 
 	s.async = true; 
 	s.src = 'https://apiplug.com/js/webwidget/embedwidget.js'; 
 	document.body.appendChild(s); 
 	} 
 	if(window.attachEvent) 
 		window.attachEvent('onload',apiplug); 
 	else 
 		window.addEventListener('load',apiplug,false); 
 }()); 
 </script>

If you want you can customise header section of our widget:

<div class="webwidgetBox" style="padding:10px;border-radius:10px;background-color:#F2F5F8;border:1px solid #F2F5F8;"> 
	 <div class="webwidgetHeader" style="padding:15px;border-bottom:1px solid #9badbb;"> 
		 <div class="row"> 
			 <div class="widget_header_image" style="float:left;padding-right: 5px;"> 
				 <img class="img-circle" style="height: 60px;" src="https://apiplug.com/assets/apiplug_logo_128.png" alt="avatar"> 
			 </div>
			 <div class="widget_header_text"> 
				 <p class="widget_header_title" style="font-size:20px;font-weight: bold;"> APIPLUG TEMP Chatbot </p> 
				 <p class="widget_header_subtitle" style="font-size:15px;">Your virtual assistant</p> 
				 </div> 
			 </div> 
		 </div>
	 	<section id="apiplug_widget"></section>
	 	&nbsp;
 </div> 

Different Interaction Types

We currently support two different interaction types for our widget.

Button Activated Widget

This widget mimics FB Messengers activation. User has to start a button to start a conversation. First message comes from the user. This is ideal if you want to set a higher activation bar for your users.

Auto Activated Widget

This widget shows first action from your storyboard. A new conversation object and user will not be created until user responds to widget. In our A/B testing for apiplug.com, we found that this approach leads to a higher conversation rate.

Transferring Information

You can use widget settings to transfer information into your storyboard and use it in conversation. This way you can store custom_id for your users or attach relevant information into a conversation.

Please note that information supplied via widget will override information from a conversation.

Also please note that user_information and information objects will be sent once with first message on widget load.

User Information

<script>
     window.apiplugSettings = {
     	user_information: {
     		"name" : "Test User",
     		"label" : value
     		}
     }
</script>

Any label-value pair your supply will be attached to user participating in this conversations.

General Information

<script>
     window.apiplugSettings = {
     	information: {
     		"package_type" : "Small Package",
     		"label" : value
     		}
     }
</script>

Any label-value pair your supply will be attached to current conversation.