Copyright Hé - License GPL

Creating a sendgrid subscription widget

Email marketing   2020-11-10 14:32:07

Note: The following is a guest article by author, Paddy Sherry, a developer at Internet Leader —members of the SendGrid Accelerate Program . Leader Internet is an Irish web development company that creates websites and applications. This post is part of SendGrid"s new Show & Tell blogging series, which highlights the great things developers in our community are doing. Check out our GitHub for our open source libraries and projects. Collecting email addresses is a critical part of the marketing funnel and businesses should do everything they can to make it a seamless experience for their users. It seems like a relatively straightforward task on the front-end, but ita lot is going on behind the scenes. The user should share their email address, then the site should verify that the address belongs to a real human and store it in the company"s email marketing app. Even though the process is the same for every website, CMS, and platform, a site can be built which may require specialized integration. For this reason, we have created SG Widge t to give website administrators a simple tool to collect emails on their domain and a nice user interface to administer them. When the user submits their email, it is added to the website"s marketing list, allowing them to receive emails that may include bonus content, freebies and marketing communications futures. Technically, the fo rm connects the siteWeb to an email marketing provider such as SendGrid Marketing Campaigns. SG Widget is an inion widget which takes care of all these elements quickly. It can be added to any website, regardless of CMS. Just copy a few lines of HTML code to instantly add the widget to your website. As the code is already integrated into SendGrid"s Marketing Campaigns API, your new inions will be automatically added to your Marketing Campaigns contacts. As simple as it may be to configure, the widget and integration are also secure, fast, and customizable to suit your website design aesthetic. Why it was created As a web development agency, we have found email to be one of the most vital components of the products we build. However, the inion widget market does not have a clear leader that is not related to a specific CMS or technology. Managing lots of websites means working on lots of inion widgets, APIs, and custom code. We decided to create SG Widget for a number of reasons: Our own needs - Customers contact us with legacy systems and want a universal solution for any website, whatever the CMS, the language or the framework. It saves us time and effort because we can add a widget in less than five minutes. Security - We needed to ensure that the API key was secure on a server rather than integrated into a front-end application. Possibility to customize - Every website is different. We wanted to have the ability to change the style to suit any site, rather than having something that conflicts with the design of the site or that is so generic that it does not encourage users to add their address. When we have a new site, we can add SG Wid get and our customers can start collecting emails from their users right away. Our Approach Despite the fragmented nature of CMS and the technological landscape of websites, there is one thing that ties them all together in that they all produce HTML when rendering on the front-end. This means that the HTML code can be dropped into almost any website and provide cross-platform interoperability - a universal solution for any website. This is what it will look like on your site: And here is the code that a user puts in his site to create the widget: As you can see, these are just a fewlines of HTML and an external JavaScript file. To create this widget: Login to SG Widget interface Enter your SendGrid marketing campaign list ID (where 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 HTML site. There is no need to edit the HTML or write any code because everything the widget needs to work is included directly in this snippet. How it works When a user enters their email address and clicks Submit, the widget sends client information to the SG Widget API. We verify that the request is valid by validating your unique identifier and the site from which the request originated. We then add the contact information to the correct contact list. The client then receives a return message in the browser to tell himfind out if the attempt was successful or he receives a validation error to let him know what the problem was. We validate inputs on the front-end and in our API to make sure there are multiple file security levels and nothing touches SendGrid without needing to do so. All of this happens transparently, so there is no lag on the front-end and the user does not wait to know if it has subscribed successfully. Points to remember SG Widget provides email collection for website administrators and easy inion method for users. It"s already configured to integrate with SendGrid marketing campaigns, so you don"t have to write a single line of code. Collecting valid email addresses remains a crucial part of the marketing arena, as your customers ask you to communicate with them. Whatever your CMS or messenger provider ise, you should have a strategy for collecting emails on your website today. To learn more about how to grow your mailing list, see How to Grow Your SendGrid Mailing List guide.