LeadFlip

Popup Widget Settings

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

Installation

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

A fully customized widget code looks like this:

<script>
     window.leadflipSettings = { 
     bot_id: "paBISoVcuUINkahD", 	
     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://popupwidget.leadflip.ai' async > </script>

This will put an icon on bottom right hand of your site.

Triggering Popup Window

Id for our button is “leadflip_circle”, so you can just trigger it by doing

<script>
     document.getElementById('leadflip_circle').click();
 </script>

Button Settings

These settings control how your button will appear to the visitor. You can use an icon, text or both depending on your preference.

<script>
     window.leadflipSettings = { 
     ....
     button_image: 'https://popupwidget.leadflip.ai/logo_128.png', 
     button_text: 'Get Your Quote Now', 
     button_background_color: '#f2f5f8', 
     button_text_color: '#000000', 
     ....
   }; 
   window.leadflip.init();
 </script>

 

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.