Introduction

GEC [Gentle Email Capture] is a themeable web component designed specifically to capture emails on your landing pages. Using integrations, you can pass the emails to desired 3rd party services.

Benefits

• Super fast & simple setup - Requires minimal knowledge of HTML and CSS - No backend or database experience required

  • Implementing in a project is as easy as copy & pasting
  • Help & support is always available on twitter & email [[email protected]]

• Saves you time & effort - Automatically inherits styles from your project's global stylesheet - You can however override the style

• Integrations improves your productivity - Integrates with external services that you already love and use - No need to manually migrate data between these services - You can save emails directly into airtable - More integrations are coming. Stay tuned!

• Segment your leads and cater them better - - Give a unique ID to the components and know who converted where

Getting Started

You can add GEC to your project using Node/npm or by adding a script-tag to your pages.

1. Adding using Node/Npm

npm install --save gec-particle

2. Adding using script tag:

<script type="module" src="https://unpkg.com/gec-particle/dist/gec-particle/gec-particle.esm.js"></script> <script nomodule="" src="https://unpkg.com/gec-particle/dist/gec-particle/gec-particle.js"></script>

Component Attributes

• pid

• loc

• label

• placeholder

• btn-text

• btn-text-onsubmit

• sub-text

• submit-success-msg

• submit-failed-msg

• color-validation

Example

<gec-particle

pid="34235-t34545f-75jgsdg"

name="landing-hero-section-cta"

label="Join our waiting list"

placeholder="Email"

btn-text="Join Now"

btn-text-onsubmit="Joining.."

sub-text="Free 7-day trial. No credit cards required"

submit-success-msg="Thank you for joining our waiting list. We will inform you when we launch"

submit-failed-msg="Oops.. something went wrong. Get in touch with us over mail or Twitter"

color-validation+"true"

></gec-particle>

Styling

gec-particle can be styled using the following CSS classes:

• .gec-container

• .gec-boxbtn-container

• .gec-label

• .gec-emailbox

• .gec-email-valid

• .gec-email-invalid

• .gec-emailbox-disabled

• .gec-btn

• .gec-btn-disabled

• .gec-sub-text

• .gec-success-container

• .gec-success-msg

• .gec-failed-container

• .gec-failed-msg