Note: The following is a guest post by author, Paddy Sherry, a developer at Leader Internet—members of the SendGrid Accelerate program. Leader Internet is an Irish web development company that builds websites and apps. This post is part of SendGrid’s new Show & Tell blog series that highlights the awesome things developers in our community are doing. Check out our GitHub for our libraries and open source projects.
Email address collection is an essential part of the marketing funnel and businesses should do everything they can to make this a seamless experience for their users. It appears to be a relatively straightforward task on the front end, but a lot goes on behind the scenes. The user needs to share their email address, and then the site needs to verify the address belongs to a real human and store it in the business’ email marketing application.
Even though the process is the same for every website, CMS and platform, a site can be built that may require a specialized integration. For that reason, we created SG Widget to give website administrators a simple tool to collect emails on their domain and a nice UI to administer it from.
A subscription widget consists of a piece of code that is inserted into a site that renders a form where customers can enter their email address.
When the user submits their email, it is added to the website’s marketing list, allowing them to receive emails that might include bonus content, giveaways, and future marketing communications. On the technical side, the form connects the website to an email marketing provider like SendGrid Marketing Campaigns.
SG Widget is a sign-up widget that takes care of all of these items quickly. It can be added to any website—regardless of the CMS. Just copy a few lines of HTML to instantly add the widget to your website.
Because the code is already integrated with SendGrid’s Marketing Campaigns API, your new signups will be automatically added to your Marketing Campaigns contacts. As easy as it is to set up, the widget and integration are also secure, fast, and customizable to fit the design aesthetic of your website.
As a web development agency, we have found email to be one of the most vital components of the products we build. However, the sign-up widget market has no clear leader that isn’t tied to a specific CMS or technology. Dealing with lots of websites means working on many sign-up widgets, APIs, and bespoke code. We set about building SG Widget for a number of reasons:
Our own needs - Clients approach us with legacy systems and want a universal solution for any website, regardless of CMS, language, or framework. This saves us time and effort as we can add a widget in less than five minutes.
Security - We needed to guarantee that the API key was secure on a server rather than integrated into a front end application.
Ability to customize - Every website is different. We wanted the ability to change the style to fit into any site, rather than having something that clashes with the site’s design or is so generic that it doesn’t entice users to add their address.
The result is a reusable tool that dramatically reduces our development time.
When we have a new site, we can drop in SG Widget and our customers can start collecting their user’s emails right away.
Despite the fragmented nature of the CMS and website technology landscape, there is one thing that ties them all together in that they all produce HTML when rendered on the front end. This means HTML code can be dropped into almost any website and offer cross-platform interoperability—a universal solution for any website.
Here is what it will look like on your site:
And here is the code a user puts into their site to create the widget:
As you can see, it’s just a few lines of HTML and an external JavaScript file. To create this widget:
Sign into the SG Widget interface
Enter your SendGrid Marketing Campaigns List ID (where the emails will be stored), and the URL of the website the widget will be embedded on
A unique code is then generated to copy and paste directly into your website HTML. There is no need to modify the HTML or write any code as everything the widget needs to function is included directly in this snippet.
When a user enters their email address and clicks submit, the widget sends the customer’s information to the SG Widget API. We verify the request is valid by validating your unique ID and the site where the request came from. We then add the contact information to the correct contacts list.
The customer then receives a feedback message in the browser to let them know if the attempt was a success or they receive a validation error to let them know what the problem was. We validate input on the front end and in our API to ensure there are multiple levels of security and nothing is touching SendGrid without needing to.
All of this happens seamlessly so there is no lag on the front end and the user is not waiting to find out if they subscribed successfully.
SG Widget provides email collection for website administrators and an easy sign-up method for users. It’s already set up to integrate with SendGrid Marketing Campaigns, so you don’t have to write a single line of code.
Valid email address collection remains a crucial part of the marketing sphere, as your customers are asking you to communicate with them. Regardless of your CMS or email provider, you should have a strategy for collecting emails on your website today. For more on how to grow your email list, check out SendGrid’s How To Grow Your Email List guide.
