Mobile Version
Coming Soon

Introduction

Important:
This information is not mandatory Although this content does allow you to broaden your options if you are interested in adding fleeqs/series or email paywall functionality onto your own website.
The SDK is an extension of the fleeq ecosystem, it provides extra capabilities which are applicable to your website. Once the SDK is embedded, you would be able to launch fleeqs along your own website. we We fully support all browsers and mobile devices.

Common usages might be: display a demo of your product on your commercial website, a help call to action that launches a modal with an interactive flow, a dedicated section of "academy", or simply a lead generator modal that drives more opportunity. In just 2-3 minutes your environment would be fully integrated and ready for any fleeqs/series adoption. SDK support:
Feature Description
Fleeq An interactive flow that tells a story, demo's a product, solves a support issue, etc, Embeddable in 4 different sizes or as a popup modal
Series A collection of fleeqs, which enables a broader "story", embeddable in 4 different sizes or as a popup modal
Email paywall An offer to deliver fleeqs and series in exchange to email information, embeddable in 3 different sizes or as a popup modal

Setup

In our dashboard we offer a simple way to embed any element by adding the fleeq sdk as a suffix on each embed, example:
<div class="guidez3rdpjs-inline" data-key="xxxxxxxxx-xxxxxxxxxx" data-mtype="g" data-inline-type="full-mini"></div>
<script src="https://sdk.fleeq.io/fleeq-sdk-light.js"></script>
As a more convenient way, you can include the JS file once (in a global file, for instance), and then add fleeqs through out your website.
<script src="https://sdk.fleeq.io/fleeq-sdk-light.js"></script>
And later:
<div class="guidez3rdpjs-inline" data-key="xxxxxxxxx-xxxxxxxxxx" data-mtype="g" data-inline-type="full-mini"></div>

Embed

Fleeq and series inline embed are built into a div tag with relevant data attributes that identify the type and behaviour of the embed. All embeds includes an iFrame component that automatically launches the relevant fleeq/series
Name Type Required Description
guidez3rdpjs-inline Class Yes Indicates this element is of type inline embed
data-key Data-attribute Yes The key that identifies the fleeq/series
( xxxxxxxxx-xxxxxxxxxx )
data-mtype Yes-attribute Yes Identifies the type of the embed : a fleeq ('g') or a series ('c')
data-inline-type Data-attribute Yes Size / format of the embeddable component (detailed in the next table)
data-auto-play Data-attribute No Launch automatically on load, True or false (default is false)
An example for such a div, containing, a "mini" embeddable fleeq might look like this:
<div class="guidez3rdpjs-inline" data-key="xxxxxxxxx-xxxxxxxxxx" data-mtype="g" data-inline-type="full-mini"></div>
Fleeq and series inline embed enable for different sizes within two formats:
Name Size Support Description
large_1_icons full-big 740x555 Fleeq, Series Grabs most of the user attention (in most cases, takes up a major part of your end user viewport)
mid_1_icons full 600x450 Fleeq, Series The default size, opens additional space for textual information
small_1_icons full-mini 400x300 Fleeq A mini version, works great as a quick tutorial that could evolve for more
"full-big" Example:
<div class="guidez3rdpjs-inline" data-key="xxxxxxxxx-xxxxxxxxxx" data-mtype="g" data-inline-type="full-big"></div>
"full" Example:
<div class="guidez3rdpjs-inline" data-key="xxxxxxxxx-xxxxxxxxxx" data-mtype="g" data-inline-type="full"></div>
"full-mini" Example:
<div class="guidez3rdpjs-inline" data-key="xxxxxxxxx-xxxxxxxxxx" data-mtype="g" data-inline-type="full-mini"></div>

Mobile

On mobile, all inline embed options would appear as an actionable image, once clicked, this would open an additional tab on your mobile browser with the relevant fleeq/series

Email paywall - Embed

Fully customizable email paywalls widgets that appear along side your site content, drive lead generation with inline opt-in mechanism.
Name Type Required Description
guidez3rdpjs-inline Class Yes Indicates this element is of type inline embed
data-key Data-attribute Yes The key that identifies the paywall
( xxxxxxxxx-xxxxxxxxxx )
Email paywall holds a unique key ( different from the fleeq/series he represents )
data-mtype Data-attribute Yes Identifies the type of the embed: an email paywall ('lb')
data-inline-type Data-attribute Yes Size / format of the embeddable component (detailed in the next table)
An example for such a div, containing, an "L" embeddable email paywall might look like this:
<div class="guidez3rdpjs-inline" data-key="xxxxxxxxx-xxxxxxxxxx" data-mtype="lb" data-inline-type="L"></div>
Email paywall is offered in different sizes within two formats:
Name Size Support Description
leadgensmallembed_preview M 510x210 Fleeq, Series A common size for opt in services, "plays" alongside additional content
embed_3_icons L 710x315 Fleeq, Series A bigger version of 'M', grabs the relevant attention with extended width
leadgenverticalembed_preview box 360x340 Fleeq, Series A vertical version, might be more relevant when embedded on the page outskirts
"M" Example:
<div class="guidez3rdpjs-inline" data-key="xxxxxxxxx-xxxxxxxxxx" data-mtype="lb" data-inline-type="M"></div>
"L" Example:
<div class="guidez3rdpjs-inline" data-key="xxxxxxxxx-xxxxxxxxxx" data-mtype="lb" data-inline-type="L"></div>
"box" Example:
<div class="guidez3rdpjs-inline" data-key="xxxxxxxxx-xxxxxxxxxx" data-mtype="lb" data-inline-type="box"></div>

Mobile

On mobile, all inline paywall formats would appear as the 'box' format.

Email paywall - Modal

With email paywall you can offer your fleeqs and series as premium content, Modal behaviour enables you to launch relevant call to actions that grab the user attention ( targeted and focused )
Name Type Required Description
guidez3rdpjs-modal Class Yes Indicates this element is of type modal (popup) embed
data-key Data-attribute Yes The key that identifies the fleeq/series
( xxxxxxxxx-xxxxxxxxxx )
data-mtype Data-attribute Yes Identifies the type of the embed : an email paywall ('lb')
Modal code Example:
<div class="guidez3rdpjs-modal" data-key="xxxxxxxxx-xxxxxxxxxx" data-mtype="lb">
Click me to view </div>
Click me to view

Mobile

On mobile, modal integrations appear the same.

Thumbnail

for each fleeq/series we automatically generate a thumbnail, with your chosen color. To customize how such a thumbnail might look you should:
1. Set the relevant thumbnail from all the screens that are in the relevant fleeq ( or choose which fleeq would represent the a series )
2. Go to fleeq / series theme configuration, click on the thumbnail tab on teh bottom and don't forget to click save here is a short fleeq to illustrate this,
Click here
The URL for this thumbnail is located at:
https://s3-eu-west-1.amazonaws.com/guidez-thumbnails/p/xxxxxxxxx-xxxxxxxxxx_600.jpg
Example #1: Modal launch w/ a thumbnail ( Email paywall ) :
<div class="guidez3rdpjs-modal" data-key="xxxxxxxxx-xxxxxxxxxx" data-mtype="lb">
<img width="350" src="https://s3-eu-west-1.amazonaws.com/guidez-thumbnails/p/xxxxxxxxx-xxxxxxxxxx_600.jpg"> </div>
Example #2: Modal launch w/ a thumbnail ( Fleeq ) :
<div class="guidez3rdpjs-modal" data-key="xxxxxxxxx-xxxxxxxxxx" data-mtype="g">
<img width="350" src="https://s3-eu-west-1.amazonaws.com/guidez-thumbnails/xxxxxxxxx-xxxxxxxxxx_600.jpg"> </div>

SDK restart

You may need to restart the SDK after loading dynamic content with fleeqs/series or email paywall widgets. Given the SDK is scanning your code and generates the relevant components on page load, you might need to re-call this capability.
Fleeq's API includes a simple javascript call that re scanns your code for relevant components.
FleeqSDK.init();

Fleeq keys

Every now and then you might want to just switch between fleeq keys, instead of adding the same embed code (all over again). In these cases, you just need to get the code of the relevant fleeq/series and add it to your current embeddable code. Here is a quick tutorial that shows how you can fins and use your fleeq code key