How to Create a Floating Live Chat Optin with OptinMonster

Share Tweet Share Pin

We’re often asked to share some cool use cases of OptinMonster. So, I thought I’d share a really neat solution with you that we recently built for one of our users. It’s a cool 2-step optin form that acts just like a live chat notice.

Similar to a floating live chat notice, we’ll slide in an image and use a MonsterLink to load an optin.

You can click here to view the live demo as well.

Top ToolsWant to add live chat to your site? Check out our roundup of the best live chat plugins and software to make it easy!

Benefits of a 2-Step Optin

Two-step optins are proven to convert higher than automatic optins because they require user initiation. This works on the Ziegarnik effect, which says that people focus more on uncompleted tasks rather than completed tasks. So when the user initiates the optin, they are more likely to follow through by entering their email address.

Case StudyHow Cosmetic Packaging Now Grew Their Email List by 754% with 2-Step Optins

This is why content upgrades convert 5X higher than normal optins: because they require the user to initiate the process of subscribing. (Check out 30 content upgrade ideas here.)

Ready to learn how to create a floating live chat optin for your website? Let’s get started!

NOTE: This tutorial is a great place to get started with more advanced usage of OptinMonster. Be sure to check out all of our other great documentation on Extending OptinMonster for more ideas.

How to Create a Floating Live Chat Optin

Because this is an advanced tutorial, we’ve broken it down for you into 5 sections. Click on the links below to skip to each of the sections:

The HTML — The CSS — The Javascript — Embed the Optin — The PSD Files

The HTML

We’ve created two different styles of floating MonsterLinks. The HTML for both of these is identical except for a single class.

Since the position of the Floating MonsterLink is set to absolute you can add the HTML anywhere in the body of your page.

Style 1 – Right Slide-In

1&lt;!-- Floating MonsterLink Style 1 --&gt;
2&lt;div class="floating-monsterlink style1"&gt;
3 
4    &lt;div class="floating-avatar"&gt; 
5        &lt;span&gt;&amp;nbsp;&lt;/span&gt;
6    &lt;/div&gt;
7 
8    &lt;p class="floating-cta"&gt;Want to get 25,000 unique visitors a month?&lt;/p&gt;
9 
10    &lt;p class="floating-cta"&gt; 
11        &lt;a href="#" class="manual-optin-trigger" data-optin-slug="oqxhwmovdrq4xzue"&gt;Click here to learn how&lt;/a&gt; 
12        &lt;!-- Update the data-optin-slug attribute with the slug of your own optin you want to load on click. --&gt;
13    &lt;/p&gt;
14 
15    &lt;!-- START close icon, remove to make Floating Bar permanent. Use with caution, not recommended to remove if loading on mobile devices. --&gt; 
16    &lt;a href="#" class="float-close"&gt;x&lt;/a&gt;
17    &lt;!-- END close icon --&gt;
18 
19&lt;/div&gt;

Style 2 – Bottom Slide-Up

1&lt;!-- Floating MonsterLink Style 2 --&gt;
2&lt;div class="floating-monsterlink style2"&gt;
3 
4    &lt;div class="floating-avatar"&gt; 
5        &lt;span&gt;&amp;nbsp;&lt;/span&gt;
6    &lt;/div&gt;
7 
8    &lt;p class="floating-cta"&gt;Want to get 25,000 unique visitors a month?&lt;/p&gt;
9 
10    &lt;p class="floating-cta"&gt; 
11        &lt;a href="#" class="manual-optin-trigger" data-optin-slug="oqxhwmovdrq4xzue"&gt;Click here to learn how&lt;/a&gt; 
12        &lt;!-- Update the data-optin-slug attribute with the slug of your own optin you want to load on click. --&gt;
13    &lt;/p&gt;
14 
15    &lt;!-- START close icon, remove to make Floating Bar permanent. Use with caution, not recommended to remove if loading on mobile devices. --&gt; 
16    &lt;a href="#" class="float-close"&gt;x&lt;/a&gt;
17    &lt;!-- END close icon --&gt;
18 
19&lt;/div&gt;

The CSS

Style 1 – Right Slide-In

Our Style 1 Floating MonsterLink is blue and positioned at the bottom-right hand side of the browser window. The avatar image is also larger and positioned to the left of the call-to-action text and MonsterLink.

1/* --- Floating MonsterLink Style 1 CSS ---
2 ------------------------------------------ */
3 .floating-monsterlink.style1.show {
4    right: 30px;
5 }
6 .floating-monsterlink.style1 {
7    margin: 0;
8    width: auto;
9    border-radius: 10px;
10    display: inline-block;
11    position: absolute;
12    bottom: 30px;
13    right: -350px;
14    width: 160px;
15    padding: 10px 10px 10px 60px;
16    background-color: #eaeaea;
17    border: 5px solid #165c92;
18    -webkit-box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.4);
19    -moz-box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.4);
20    box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.4);
21    -webkit-transition: right 3000ms ease-in-out;
22    -moz-transition: right 3000ms ease-in-out;
23    -o-transition: right 3000ms ease-in-out;
24    transition: right 3000ms ease-in-out;
25}
26.floating-monsterlink.style1 .floating-avatar {
27    top: -20px;
28    margin: 0;
29    padding: 0;
30    display: block;
31    overflow: hidden;
32    width: 120px;
33    height: 120px;
34    position: absolute;
35    margin-left: -150px;
36    border-radius: 999em;
37    border: 8px solid #165c92;
38    background-color: #165c92;
39    -webkit-box-shadow: -2px 2px 15px 0 rgba(0, 0, 0, 0.4);
40    -moz-box-shadow: -2px 2px 15px 0 rgba(0, 0, 0, 0.4);
41    box-shadow: -2px 2px 15px 0 rgba(0, 0, 0, 0.4);
42}
43.floating-monsterlink.style1 .floating-avatar span {
44    width: 106px;
45    height: 106px;
46    display: block;
47    overflow: hidden;
48    border-radius: 999em;
49    background-size: cover;
50    background-color: #eaeaea;
51    border: 15px solid #eaeaea;
52    margin: -8px auto auto -8px;
53    background-image: url('https://cdn.staging.optinmonster.com/wp-content/uploads/2015/09/erica-avatar-200x200.jpg');
54}
55.floating-monsterlink.style1 .floating-cta {
56    padding: 0;
57    font-size: 13px;
58    text-align: left;
59    line-height: 1.5em;
60    margin: 0 auto 15px;
61    font-family: Helvetica, "Helvetica Neue", Arial, sans-serif;
62}
63.floating-monsterlink.style1 p.floating-cta:last-of-type {
64    margin: 0 auto;
65}
66.floating-monsterlink.style1 a.manual-optin-trigger {
67    color: #043f6c;
68    text-decoration: underline;
69}
70.floating-monsterlink.style1 a.float-close {
71    top: -15px;
72    right: -15px;
73    color: #fff;
74    height: 24px;
75    width: 24px;
76    font-weight: 300;
77    line-height: 23px;
78    text-align: center;
79    position: absolute;
80    border-radius: 999em;
81    text-decoration: none;
82    background-color: #444;
83    font-family: sans-serif;
84    -webkit-box-shadow: -1px 1px 3px rgba(0, 0, 0, 0.4);
85    -moz-box-shadow: -1px 1px 3px rgba(0, 0, 0, 0.4);
86    box-shadow: -1px 1px 3px rgba(0, 0, 0, 0.4);
87}

Style 2 – Bottom Slide-Up

Our Style 2 Floating MonsterLink is positioned in the bottom left-hand area of the browser window, uses dark red colors and the avatar image is smaller and located to the right of the call-to-action text and MonsterLink.

1/* --- Floating MonsterLink Style 2 CSS ---
2 ------------------------------------------ */
3 .floating-monsterlink.style2.show {
4    bottom: 30px;
5 }
6 .floating-monsterlink.style2 {
7    margin: 0;
8    width: auto;
9    border-radius: 10px;
10    display: inline-block;
11    position: absolute;
12    bottom: -160px;
13    left: 30px;
14    width: 180px;
15    padding: 10px 20px;
16    background-color: #eaeaea;
17    border: 7px solid #92162d;
18    -webkit-box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.4);
19    -moz-box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.4);
20    box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.4);
21    -webkit-transition: bottom 3000ms ease-in-out;
22    -moz-transition: bottom 3000ms ease-in-out;
23    -o-transition: bottom 3000ms ease-in-out;
24    transition: bottom 3000ms ease-in-out;
25}
26.floating-monsterlink.style2 .floating-avatar {
27    top: 35px;
28    margin: 0;
29    padding: 0;
30    display: block;
31    overflow: hidden;
32    width: 75px;
33    height: 75px;
34    position: absolute;
35    margin-left: 175px;
36    border-radius: 999em;
37    border: 4px solid #92162d;
38    background-color: #92162d;
39    -webkit-box-shadow: 2px 2px 15px 0 rgba(0, 0, 0, 0.4);
40    -moz-box-shadow: 2px 2px 15px 0 rgba(0, 0, 0, 0.4);
41    box-shadow: 2px 2px 15px 0 rgba(0, 0, 0, 0.4);
42}
43.floating-monsterlink.style2 .floating-avatar span {
44    width: 69px;
45    height: 69px;
46    display: block;
47    overflow: hidden;
48    border-radius: 999em;
49    background-size: cover;
50    background-color: #eaeaea;
51    border: 15px solid #eaeaea;
52    margin: -12px auto auto -12px;
53    background-image: url('https://cdn.staging.optinmonster.com/wp-content/uploads/2015/09/erica-avatar-200x200.jpg');
54}
55.floating-monsterlink.style2 .floating-cta {
56    padding: 0;
57    font-size: 15px;
58    text-align: left;
59    line-height: 1.5em;
60    margin: 0 auto 15px;
61    font-family: Helvetica, "Helvetica Neue", Arial, sans-serif;
62}
63.floating-monsterlink.style2 p.floating-cta:last-of-type {
64    margin: 0 auto;
65}
66.floating-monsterlink.style2 a.manual-optin-trigger {
67    color: #730519;
68    text-decoration: underline;
69}
70.floating-monsterlink.style2 a.float-close {
71    top: -13px;
72    left: -13px;
73    color: #fff;
74    height: 20px;
75    width: 20px;
76    font-weight: 300;
77    line-height: 1.2em;
78    text-align: center;
79    position: absolute;
80    border-radius: 999em;
81    text-decoration: none;
82    background-color: #444;
83    font-family: sans-serif;
84    -webkit-box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.4);
85    -moz-box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.4);
86    box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.4);
87}

RECOMMENDED: If the site’s body element doesn’t already include overflow: hidden; in its CSS styles we recommend you add this to prevent scrollbars from appearing when the Floating MonsterLink animates into and out of view.

1body {
2    overflow: hidden !important;
3}

The Javascript

We’re going to use some jQuery animations to smoothly transition the Floating MonsterLink into view, and the OptinMonster Javascript Events API to hide the Floating MonsterLink once the visitor selects the MonsterLink to open the optin.

Style 1 – Right Slide-In

1// Floating MonsterLink Style 1
2jQuery(document).ready(function ($) {
3 
4    //* Animate Floating MonsterLink into view on page load
5    $(".floating-monsterlink.style1").addClass("show");
6 
7    //* Animate out of view function
8    function closeFloatingMonsterLink(e) {
9        e.preventDefault();
10        $(".floating-monsterlink.style1").removeClass("show");
11    }
12 
13    //* Triggers that run closeFloatingMonsterLink function
14    // run closeFloatingMonsterLink when close icon is selected
15    $('.floating-monsterlink.style1 .float-close').click(closeFloatingMonsterLink);
16 
17    // run closeFloatingMonsterLink when manual trigger optin is successfully loaded
18    $(document).on('OptinMonsterManualOptinSuccess').click(closeFloatingMonsterLink);
19 
20});

Style 2 – Bottom Slide-Up

1// Floating MonsterLink Style 2
2jQuery(document).ready(function ($) {
3 
4    //* Animate Floating MonsterLink into view on page load
5    $(".floating-monsterlink.style2").addClass("show");
6 
7    //* Animate out of view function
8    function closeFloatingMonsterLink(e) {
9        e.preventDefault();
10        $(".floating-monsterlink.style2").removeClass("show");
11    }
12 
13    //* Triggers that run closeFloatingMonsterLink function
14    // run closeFloatingMonsterLink when close icon is selected
15    $('.floating-monsterlink.style2 .float-close').click(closeFloatingMonsterLink);
16 
17    // run closeFloatingMonsterLink when manual trigger optin is successfully loaded
18    $(document).on('OptinMonsterManualOptinSuccess').click(closeFloatingMonsterLink);
19 
20});

Embed the Optin

Be sure to embed the optin wherever you plan to display the Floating MonsterLink according to our MonsterLinks documentation.

In this demo we created a Lightbox optin, but you can manually trigger the following types of optin with your MonsterLink:

Lightbox
Fullscreen — Requires a Pro subscription
Mobile — Requires a Pro subscription

Download the PSDs (optional)

You can download the original PSDs used to create our demo Floating MonsterLinks from the following links:

Download the Style 1 PSD File — Download the Style 2 PSD File

That’s it! You’ve successfully added a floating live chat optin to your site! Now, check out these live chat best practices to kick your customer service into high gear.

Leveraging proven psychological principles is a really smart way to increase conversions on your website.

When you use the Zeigarnik effect with a 2-step optin form together with a slide-in animation, you’ll dramatically increase your conversions.

Ready to put these psychological principles to use on your website? Get started with OptinMonster today to boost your conversions and make more sales.

Share Tweet Share Pin

Disclosure: Our content is reader-supported. This means if you click on some of our links, then we may earn a commission. We only recommend products that we believe will add value to our readers.

Add a Comment Cancel reply

We're glad you have chosen to leave a comment. Please keep in mind that all comments are moderated according to our privacy policy, and all links are nofollow. Do NOT use keywords in the name field. Let's have a personal and meaningful conversation.

Comment Text

FAQs

FAQs Title

FAQs Short Description

Add / Remove FAQs

Add / Remove Resources

Add a new Resource

	Resource Item
1

Add Row

Pricing Page FAQs

Footer CTA Text

Footer CTA Button

Header CTA Info

Header Visuals

Title / Desc

Solutions

Features

Integrations

Publications

	Featured Publication Logo
1

One response to “How to Create a Floating Live Chat Optin with OptinMonster”

Keri Vandongen

October 4, 2016

That is Cool, Mary!
Thanks for including all of the detailed steps and even the code info.
You’re timing is ideal as I need to revise my Home page -hopefully sooner than later.
My plan is to include high quality blog content on this page. This would be tied in with an Opt-in offer.
If I was using a 2-step Optin, would you recommend having it slide over when someone is partially finished reading – as per the research for incomplete tasks?
Or would my readers be more invested after finishing my blog, uninterrupted?
~Keri

How Aish.com Gets 10X More Subscribers Using Targeted Optins

How to Create a Floating Live Chat Optin with OptinMonster

Benefits of a 2-Step Optin

How to Create a Floating Live Chat Optin

12 Proven Ways to Convert Abandoning Visitors into Subscribers

Add a Comment Cancel reply

One response to “How to Create a Floating Live Chat Optin with OptinMonster”

Everything You Need to Grow Your Lists, Leads and Sales!

Blog Topics

Popular Posts

Connect with us:

Free Guides

Growth Hacker Insights: Ultimate Guide to Growth Hacking

Guide to Holiday Campaigns Brought to You by OptinMonster

19 Ways to Reduce Cart Abandonment and Grow Your Revenue

Start Getting More
Leads & Sales Today
with OptinMonster!

Top Features

.

What Is a Lightbox Popup and How to Create It (In 5 Easy Steps)

How Aish.com Gets 10X More Subscribers Using Targeted Optins

Benefits of a 2-Step Optin

How to Create a Floating Live Chat Optin

12 Proven Ways to Convert Abandoning Visitors into Subscribers

Add a Comment Cancel reply

One response to “How to Create a Floating Live Chat Optin with OptinMonster”

Everything You Need to Grow Your Lists, Leads and Sales!

Blog Topics

Popular Posts

Connect with us:

Free Guides

Growth Hacker Insights: Ultimate Guide to Growth Hacking

Guide to Holiday Campaigns Brought to You by OptinMonster

19 Ways to Reduce Cart Abandonment and Grow Your Revenue

Start Getting MoreLeads & Sales Todaywith OptinMonster!

Start Getting More
Leads & Sales Today
with OptinMonster!