Add support for subscription widget in new Marketing Campaigns tool

[siruguri]

For new users, it would be helpful to know where to get the token that identifies the widget, without knowing how the previous embed code used to work.

[marcoschicote]

Hi I ended up using https://leaderinternet.com/products/sendgrid-widget Its missing a couple of things that I needed but works great and installation was really easy!

[mbernier]

@leaderint ^

[milomirtopic47]

+1

[AndreiMotinga]

I ended up using https://leaderinternet.com/products/sendgrid-widget

just tried. was unable to generate widget. Just fails.

Update:

Was contacted by leaderinternet.com support, who was very helpful. We resolved the problem, I believe the issue was due to my account not being verified. The widget works indeed as expected.

For someone not familiar with sendgrid and leaderinternet.com dashboards it was a bit tricky to find all the necessary things. for example, in this article Sign into the SG Widget interface wasn't immediately clear, where exactly is this interface. @leaderint, you folks might want to make slightly more clear.
Or in order to generate widget, you need 2 things. api token and list id... while token was easy to find, there isn't link like Lists in Sendgrid dashboard.. had to really dig and guess in order to find it.

All being said, @leaderint + 100500, thanks a ton for your help.

[headerbidding]

I am using the free version of Privy. http://www.privy.com It works well. Also it is GDPR compliant and has a "exit-intent pop-up" feature https://privy.com/exit-intent/

[leaderint]

Or in order to generate widget, you need 2 things. api token and list id... while token was easy to find, there isn't link like Lists in Sendgrid dashboard.. had to really dig and guess in order to find it.

We pushed a feature that solves this issue. There is a now dropdown to select the desired list. Thanks for the feedback.

[AndreiMotinga]

@leaderint Wait a sec, do I have to pay to use this widget?

[leaderint]

Yes. It has many more features than the legacy widget including consent checkboxes and Double Opt In

[albertbenitez]

2 years ago and still no quality post to solve this problem. I have to spend hours looking for a solution that is not paid. Shame that Sendgrid doesn't support developer community.

[tetreault]

here from the future, +1.

Sendgrid making me sad :(

[tmchow]

I literally don't know why this isn't easier. I've seen the drop in "widget" for supplying an email, but I'd expect there to be a UI for customers to be able to manage their own subscription preferences. This is crazy.

[leaderint]

you can include a subscription preferences link at the bottom of any email you send: https://sendgrid.com/docs/User_Guide/Suppressions/recipient_subscription_preferences.html

[kpx-dev]

Hi, please support this feature natively. I really like how Mailchimp does it. Thank you.

[d3v-null]

It's kind of baffling that SendGrid has all these advanced features like A/B testing but no easy way to add a form to your site that allows people to subscribe to a mailing list. A SendGrid subscription might be just cheaper than MailChimp by itself, but the combined cost of SendGrid plus the subscription widget you have to buy https://sgwidget.com/ to get the subscription widget feature that comes with mailchimp out of the box comes out to the same price. Something to consider...

[kpx-dev]

I didn't notice this issue was opened few years already, looks like it's not gonna get done. I decided to use Mailchimp to collect email list and export csv / import into SendGrid as needed, kind of suck but it works.

[andreliem]

Adding a +1 for this future.... can't believe they don't have this. Bleeding new customers here I imagine. Also in the camp of having to find another solution now.

[haffla]

Sendgrid, WTF, just buy SgWidget and make customers happy!

[japc-74]

update this +1

[tetreault]

@haffla they got that twilio money now so fingers crossed

[jonathansolorzn]

2019 already and this isn't solved yet

[grgbrasil]

+++2019

[Amantel]

+2019

[peterchrjoergensen]

See you all in 2020!

...

[brandonmwest]

Now that SendGrid is part of Twilio, I think there's a better chance of getting this prioritized. Tell Twilio you want it :)

[julio-gorge]

Not having a solution for subscription forms steered me over to Mailchimp for a particular project. Relying on a 3rd party like sgwidget is not an option.

Note: I'm an existing user of both Mailchimp and Sengrid..

[klausbadelt]

What no signup form?

[japc-74]

+1

[dfundingsland]

Agree with all the above. Get it done ;-)

[muhajirdev]

I just did my own subsciption form for sendgrid. Will open source it and put it here

[klausbadelt]

Rolled out our subscription form with incl. Netlify Function, HTML, JS. Here's the essentials. See the full working code on our Filmhub website and in our public website repository.

Not sure how to best show large code fragments here; lemme know if you have better ideas. This also a straight pull from the code; could be simplified for demonstration purposes etc.

// Netlify lambda function: src/list-signup.js
import client from '@sendgrid/client';
import { parse } from "querystring";

function addSendgridRecipient(client, email, type) {
  return new Promise((resolve, reject) => {
    const data = [
      {
        email: email,
        type: type
      }
    ];
    const request = {
      method: "POST",
      url: "/v3/contactdb/recipients",
      body: data
    };
    console.log('addSendgridRecipient request', request);
    client.request( request )
      .then( ([response, body]) => resolve(response) )
      .catch( err => reject(err) );
  });
}

// netlify-lambda has touble with async handler, keeping callback for now
exports.handler = function(event, context, cb) {
  try {
    if (event.httpMethod !== "POST") {
      cb({ statusCode: 405, body: 'Method Not Allowed' });
      return;
    };
    if (!process.env.SENDGRID_API_KEY) {
      cb({ statusCode: 401, body: 'API key missing' });
      return;
    };

    const body = parse(event.body);
    client.setApiKey(process.env.SENDGRID_API_KEY);
    addSendgridRecipient(client, body.email, body.type)
      .then( response => cb( null, { statusCode: 200, body: JSON.stringify(response) }) )
      .catch(err => {
        console.log('handler .catch', err)
        cb(null, { statusCode: 422, body: JSON.stringify(err) });
      });
  } catch(err) {
    console.log('handler catch block', err);
    cb(null, { statusCode: 422, body: JSON.stringify(err) });
  }
};

// client-side javascript: _includes/js/sendgrid-signup.js
$(document).ready(function() {
  $( "#sendgrid-signup-form" ).submit(function(event) {
    var $form = $( this );
    $form.find("button[type='submit']").html('<i class="fas fa-spinner fa-spin"></i>').attr('disabled',true);
    event.preventDefault();
    $.post( '/.netlify/functions/list-signup', $('#sendgrid-signup-form').serialize() )
      .done(function() {
        $form.find("button[type='submit']").html('Thank you!');
      })
      .fail(function(err) {
        $form.find("button[type='submit']").html('Oops - error');
        console.log(err);
      });
    });
});

<!-- HTML form: index.html ->
    <form class="form-inline justify-content-center" id="sendgrid-signup-form">
        <div class="form-check form-check-inline">
          <label class="form-check-label mr-2" for="type-filmmaker">I'm a&nbsp;</label>
          <input class="form-check-input" type="radio" name="type" id="type-filmmaker" value="filmmaker" required>
          <label class="form-check-label" for="type-filmmaker">filmmaker/producer</label>
        </div>
        <div class="form-check form-check-inline">
          <input class="form-check-input" type="radio" name="type" id="type-catalog" value="catalog" required>
          <label class="form-check-label" for="type-catalog">catalog owner</label>
        </div>
        <div class="form-check form-check-inline">
          <input class="form-check-input" type="radio" name="type" id="type-buyer" value="buyer" required>
          <label class="form-check-label" for="type-buyer">buyer/programmer</label>
        </div>
        <input class="form-control email required mr-sm-2" type="email" size=30 value="" name="email" id="sendgrid-signup-email" placeholder="Email" required>
        <button id="sendgrid-signup-submit" type="submit" class="btn btn-outline-warning">Subscribe</button>
        <div style="position: absolute; left: -5000px;" aria-hidden="true"><input type="text" name="honeypot" tabindex="-1" value=""></div>
    </form>

[muhajirdev]

If you guys interested . http://github.com/muhajirdev/sendgrid-subscription-netlify-function/ . Sendgrid subscription with confirmation. If it's useful for you. I can make some documentation for it.

[danielzen]

Thanks @muhajirdev I'm going to use your code as a starting point. Would rather host a lambda on netlify or create a webtask then pay for sgwidget. Just to make sure I understand:

• sendConfirmationEmail receives {email, first_name, last_name} from a form we don't see in your code
• that data is encrypted and sent as a link using using a template on sendgrid with TEMPLATE_ID, which we also don't see
• when you click on the link in the template (mydomain/addRecipient?id=encryptedData)
  • it adds the user to your contacts via the API posting to /v3/contactdb/recipients and
  • redirects to process.env.URL

If you were to document, I would recommend creating an example of the form that you post from, and an example of the email template...

[muhajirdev]

Hi @danielzen, correct

Yup, I can document it + make an example.

[jskn]

Hi @muhajirdev! Have you been able to do any example or documentation yet? Would be very helpful. Will also use your code as a starting point.

@danielzen did you continue working on this issue?

[TOuhrouche]

Thanks @muhajirdev the example looks good. One question though, I see that one has to embed the API key with the javascript code. This isn't safe as one could easily get hold of the key and impersonate the owner.

[muhajirdev]

Hi @jskn, Unfortunately, I haven't. However if you want to dig in by yourself. You can start here. https://www.netlify.com/docs/functions/ .

What I do with the code is, basicly. I just encrypt the email. And turn into into a unique url param. And then send the url into the user's email address.

When the user click that url, we add them into the contact list.

Hope it helps you.

[muhajirdev]

Hello @TOuhrouche , Which part of the code is it? :)

[jskn]

Hi @muhajirdev! Thank you. I will give it a try in the upcoming days.

[Tapiiri]

2020 Coming to a close with no SendGrid native subscription widget, it seems.

It's a shame. SendGrid does seem to have good transactional mail capabilities, but just as equally so do many competitors nowadays. If SendGrid would have used the last few years catching up on this, maybe things would be different - but now features speak for themselves, and it seems we'll be jumping ship to a competitor before we properly get started on our project.

Hope you guys can get some priorities in place, and work on these kinds of features, too!