Increase User Engagement with a Dynamic Elle Button to Your Website

A great strategy to increase user engagement is to add a dynamic call-to-action button that sits across all of your web pages.

This button makes it easy for your customers to ask questions in real-time. Below is an example of how an organization has placed this button in the bottom right corner of their web pages:

Screen_Shot_2020-01-15_at_3.32.54_PM.png

You want the button to be clearly visible. This is why organizations have chosen to place the button in the bottom right corner of the screen. This way, the end-user can have access to it at any moment.

To add a dynamic Elle button to your website you can follow the steps below.

1. You can add the the Elle Button with one-line of code:

<!DOCTYPE html>
<html>
  <head>
    <title>Page Title</title>
    <!-- Elle -->
    <script async>(function(e,l,b,u,t,n){t=l.createElement(b);n=l.getElementsByTagName(b)[0];t.dataset.id='elle-script';t.async=1;t.src=u;t.dataset.orgId='YOUR_ORGANIZATION_ELLE_ID';n.parentNode.insertBefore(t,n)})(window,document,'script','//d4hldqmvpzsy0.cloudfront.net/assets/elle_button.js');</script>
    <!-- End Elle -->
  </head>
  <body>
    <h1>My First Heading</h1>
    <p>My first paragraph.</p>
    <a href="#" data-toggle="elle" data-elle-button="Elle-button-id" > TEXT US! </a>
  </body>
</html>

Note: Remember to replace “Elle-button-id” with the correct EBTN ID for the Elle Journey you want to use.

2. To personalize your button, you will need to style it using CSS. Set the button so it stays static at the bottom right-hand corner of your webpage, and customize so that its style matches your website:

<a style="position:fixed;bottom:40px;right:40px;height: 40px;width: 90px;background-color:#0D7AFD;color:#fff;border-radius:10px;text-align:center;box-shadow: 2px 2px 3px #999;text-decoration: none;" href="#" class="btn float-right" data-toggle="elle" data-elle-button="Elle-button-id" > 
  APPLY NOW 
</a>

3. Finally, you just need to integrate and assign the classes to your HTML code:

<!DOCTYPE html>
<html>
  <head>
    <title>Page Title</title>
    <!-- Elle -->
    <script async>(function(e,l,b,u,t,n){t=l.createElement(b);n=l.getElementsByTagName
(b)[0];t.dataset.id='elle-script';t.async=1;t.src=u;t.dataset.orgId='YOUR_ORGANIZATION_ELLE_ID'
;n.parentNode.insertBefore(t,n)})(window,document,'script','//d4hldqmvpzsy0.cloudfront.net/assets
/elle_button.js');</script>
    <!-- End Elle -->
  </head>
  <body>
    <h1>My First Heading</h1>
    <p>My first paragraph.</p>
    <a style="position:fixed;bottom: 40px;right: 40px;height: 40px;width: 90px;background-color:#0D7AFD;color:#fff;border-radius:10px;text-align:center;box-shadow: 2px 2px 3px #999;text-decoration: none;" href="#" class="btn float-right" data-toggle="elle" data-elle-button="Elle-button-id" > APPLY NOW </a>
  </body>
</html>

Note: You can reference this code example as a reference.

Now, simply repeat the process across your web pages to have the static floating button quickly available for anyone who visits your website.

Articles in this section

Comments