LeadFlip

Embed Web Widget Settings

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

Embedding Widget to Website

You can use Web Widget Settings in chatbot dashboard to easily customize your widget. Everything from the color palette to header settings is customizable.

Minimal widget code looks like this:

<script>
     window.leadflipSettings = { 
     bot_id: "[your_bot_id]", 	
   }; 
   window.leadflip.init();
 </script> 
 <script type='text/javascript' src='https://embed.leadflip.ai' async > </script>

A fully customized widget code looks like this:

<script>
     window.leadflipSettings = { 
     bot_id: "[your_bot_id]", 	
     start_button_message: 'Get Started', 
     header_title: 'Leadflip Virtual Assitant', 
     header_icon_link: 'https://popupwidget.leadflip.ai/logo_128.png', 
     header_background_color: '#f1f4f7', 
     style_chat_background_color: '#F2F5F8', 
     style_date_text_color: '#434651', 
     style_message_bubble_color: '#9badbb', 
     style_message_bubble_text_color: '#FFFFFF', 
     style_reply_bubble_color: '#e3e3e4', 
     style_reply_bubble_text_color: '#000000', 
     style_overlay_background_color: '#000000', 
     style_overlay_text_color: '#FFFFFF', 
     style_start_button_background_color: '#e3e3e4', 
     style_start_button_text_color: '#000000', 
     style_send_button_background_color: '#F2F5F8', 
     style_send_button_text_color: '#94C2ED', 
     style_text_area_background_color: '#FFFFFF', 
     style_chat_bottom_border_color: '#000000',  
   }; 
   window.leadflip.init();
 </script> 
 <script type='text/javascript' src='https://embed.leadflip.ai' async > </script>

Just copy and paste this code where you want to the widget to appear:

<section id="leadflip_widget"></section>

Different Interaction Types

We currently support two different interaction types for our widget.

Button Activated Widget

This widget mimics FB Messengers activation. The user has to start a button to start a conversation. The 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 the first action from your storyboard. A new conversation object and user will not be created until the user responds to your 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 to 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 the first message on widget load.

User Information

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

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

General Information

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

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