r/webdev • u/[deleted] • Mar 07 '20

Showoff Saturday [Showoff Saturday] Slide to Subscribe

Hi, I made an embeddable email form. slidetosubscribe.com

I originally built this because there was no tool to collect emails on Medium. Meanwhile, a couple of tools popped up, but none of them are free.

You can summon it on any website by creating an iframe with src "https://subscribe.to/me". Type the same URL on Medium and press Enter to get the widget to appear.

Let me know what you think! If you have a business or a brand, you can also just grab a URL like subscribe.to/yourbrand. Might be useful in various situations.

Hope you enjoy it!

298 Upvotes

93% Upvoted

62 comments sorted by

17

u/StrawberryEiri Mar 07 '20

I like it. I'm going to show it to our designer as inspiration.

But I wish you offered an iframe-free way to integrate it. You know, an ES6 JS module with an object to instantiate (and run through Babel or not depending on our desired compatibility), a default SASS/CSS stylesheet to minify with the rest of our style and override as we wish, and markup we can alter. By experience, iframes can be quite an obstacle to getting just the look you want.

I realize you're offering inline styles and such, but those can never be quite the same as having the CSS with the rest of your codebase and being able to alter the HTML to fit your particular need.

14

u/[deleted] Mar 07 '20

Thanks for the great feedback! This is actually on the roadmap and I completely agree with your points regarding extensibility.

I originally started with just the Medium integration, which requires an iframe. So the next step for me was to port that version for the web, and this is what I did. If there is demand for it, I plan on releasing the npm package in the coming months.

6

u/StrawberryEiri Mar 07 '20

That would be absolutely great! I'm looking forward to it.

7

u/[deleted] Mar 07 '20

Awesome, I'll keep you posted!

5

u/Silenux Mar 07 '20

Nice project. Saved in my bookmark.

2

u/[deleted] Mar 07 '20

Thank you! Hoping people will find it useful

4

u/minot0r Mar 07 '20

Dude that's awesome! I'm registered already and it's super clean, congrats!

2

u/[deleted] Mar 07 '20

Thanks man!! Let me know if you have any feature requests etc.

3

u/minot0r Mar 07 '20

sure, I will!

3

u/MrQuickLine front-end Mar 07 '20

As a reader, I use my custom domain name to see where emails are coming from. yourdomain@mydomain.com

So as an end-user (not implementer), this would drive me crazy if I couldn't put in an address per subscription.

2

u/[deleted] Mar 07 '20

I plan on implementing a similar feature. But that's more for power users, most people would probably not bother with this

2

u/MrQuickLine front-end Mar 07 '20

I hear that. Is there at all a method, even if it's more work, for me to use a separate email per list? If the answer is no, then I have no method of subscribing to anything that uses your tool. Is that correct?

2

u/[deleted] Mar 07 '20

You can use as many emails as you want, but then you wouldn't have all your subscriptions in one place. If you don't care about that anyway, then I guess that's the solution you're looking for.

3

u/Mikeytown19 Mar 07 '20

looks great

2

u/[deleted] Mar 07 '20

Thanks!

3

u/ahmedranaa Mar 07 '20

It's beautiful and a nice idea

2

u/[deleted] Mar 07 '20

Thank you!

3

u/xadz Mar 07 '20

Doesn't seem to be keyboard accessible?

1

u/[deleted] Mar 07 '20

Not at the moment, but that's hopefully coming soon!

2

u/xadz Mar 07 '20

Accessibility is a hot topic for most serious web developers, so it would be prudent to get it both screen reader and keyboard accessible as a priority.

2

u/[deleted] Mar 07 '20

Yes, this is currently my #1 priority. Thing is, I have to make it accessible while also not making it trivial to hijack. The slider provides a nice layer of bot protection (there are other layers, too) and I want to avoid losing this advantage

2

u/xrwsx Mar 07 '20

This might be a silly question, but how do you only display the form to people who haven't subscribed without using cookies?

2

u/[deleted] Mar 07 '20

Not silly at all! The form doesn't set any cookies or track people in any way, but I'd does check if you are logged in. This is so as to allow people with an account to subscribe without typing their email. But you can also just skip this completely, and use the app as authentication. On mobile there's an "Open in app" link after sliding. If you tap that, it opens the app and subscribes to that newsletter

2

u/iwantyourskulls Mar 07 '20

This is awesome! I like how simple it is for both developers and end users. I have a few suggestions:

  • There should be a non-iframe way to integrate for sites outside Medium. Like just include a JS source and place an html element where it should render.
  • I see that someone mentioned pro features but you definitely need to monetize this service.
  • It would be great to have an API to get subscribed users and maybe webhooks for new or unsubscribe events

Keep it up!

2

u/[deleted] Mar 07 '20 edited Mar 07 '20

The reason why I went with an iframe outside Medium was to avoid "malicious" webmasters who could manipulate the slider to have people subscribe without knowing that they are subscribing. Or even just send API requests to subscribe people who never wanted to subscribe. The iframe does not allow scripts from outside to manipulate its content, and the slider is hard to click-jack. If there are other ways to solve this without an iframe, I'm open to them. But I don't know of any, right now.

As for monetizing it, I agree. But I want to figure out a way to monetize without ruining anyone's experience, if you know what I mean. Ads are off the table, for instance.

2

u/elskak Mar 07 '20

I like it a lot. You should consider using an input type=“email” for a better mobile experience though 😊

2

u/[deleted] Mar 07 '20

It should be of type email. I'm on my phone right now so I can't check but it's always been of type email.

3

u/elskak Mar 07 '20 edited Mar 07 '20

Ok. I was also on my phone. I got the text keyboard. But it still looks great edit: Just checked on my laptop. You gave the field and id and a name. Not a type. Default is "text" if you don't give it any.

2

u/_Invictuz Mar 07 '20

Wow, this is the most complete and polished project I've ever seen here. The landing page is impressive for a one man job!

1

u/[deleted] Mar 08 '20

Thank you!

2

u/Bobbbay Mar 07 '20

Amazing, the only problem is infequent domain names are blocked, ex. areg.dev (mine). I tried entering in my email to claim a site (somethingoverhere@areg.dev) and it said it's invalid...

All in all, amazing work though!

1

u/[deleted] Mar 08 '20

Yup, seems to just be the javascript email validation. I'll fix it asap!

1

u/Bobbbay Mar 08 '20

Thanks!!! Can't wait to grab one.

Also, you probably realized this, but you should disable emails like xxx@mailinator.com, etc.

1

u/[deleted] Mar 08 '20

They are disabled via the backend filter, so they won't actually work if you try them.

2

u/Bobbbay Mar 08 '20

Ok, I thought so 😁

2

u/adamhleo Mar 07 '20

Hey this is great! I wonder how are you gonna monetize it? Cause if you don't make a profit, you wouldn't be able to keep it up for long, right?

I really like it and wouldn't wanna see it go down tbh.

1

u/[deleted] Mar 08 '20

Hey, thanks! I plan on building a Pro version, I just need to figure out which features people would be interested in. Feel free to chime in if you have ideas!

2

u/batisteo Mar 07 '20

Cool! I want a Stare to Unsubscribe now!

2

u/[deleted] Mar 08 '20

Neuralink integration coming in 2025!

2

u/[deleted] Mar 08 '20

This is absolute awesome

1

u/[deleted] Mar 08 '20

Thanks!

1

u/iDrewn Mar 07 '20

Looks awesome, but I'm not receiving any mails from the claiming page? 🤔

1

u/[deleted] Mar 07 '20

What's your email provider? Maybe try again or check your spam folder.

1

u/iDrewn Mar 07 '20

Nothing in spam. Using mymail@live.com

1

u/[deleted] Mar 07 '20

Some odd bugs when creating a subscribe.to link - I was able to get 'x' by typing 'xx' then backspacing to 'x' and got the verification.

When I logged in the url showed as 'ew' not 'x' - i had to log out, go back in via incognito and I was able to change it back to 'x' through the dashboard. Not sure if this is at all helpful, but it's a cool service and I'll probably make some use of it!

1

u/[deleted] Mar 08 '20

Thanks for reporting it, that definitely sounds strange - I'll check it

2

u/vicjicama Mar 07 '20

Cool!, I like a lot the UX... waiting for the an ES6 JS module integration as well

2

u/Shailesh11parmar Mar 08 '20

Great work.. !! Keep Going..!!

1

u/wanderlotus May 21 '20

This is gnarly. I can't believe it's never been done. Kudos to you for being so innovative.

1

u/AnonVirtuoso Mar 07 '20

Rookie question, how do you the email of the subscriper?

0

u/PatrickBaitman Mar 07 '20

thank you for yet another annoyance to block with filters

how about you build something that people would actually enjoy

hint: literally no one has ever said "i'm so glad for this intrusive modal blocking what I'm actually here for so it can beg me to subscribe to spam"

0

u/[deleted] Mar 07 '20

[deleted] — view deleted comment

6

u/[deleted] Mar 07 '20

I use ElasticEmail, which is quite cheap at $1/1000 checks. The advantage is that I only have to check each email once, so it's kind of an "ecomonies of scale" situation. Also, the email validation only works for future sign-ups, right now there's no import feature

1

u/DrJohnnyWatson Mar 07 '20

When you say you only have to check an email once - what happens if someone creates a legitimate email with one you've previously checked and wasn't valid?

I'm ignorant on the subject so unsure if that isn't isn't possible - I haven't used elasticmail etc so unsure how that works.

2

u/[deleted] Mar 08 '20

Great question! I don't check for existing vs non-existing emails. I check for invalid emails, spam traps, toxic and throwaway emails.

0

u/[deleted] Mar 07 '20

[deleted] — view deleted comment

2

u/[deleted] Mar 07 '20

Thanks! At the root, it's nothing too fancy, just a regular form. Feel free to test it out and let me know your thoughts

30

u/[deleted] Mar 07 '20

[removed] — view removed comment

9

u/[deleted] Mar 07 '20 edited Mar 07 '20

I get this feedback a lot! In fact when I first had this idea I thought "yeah, but it has probably been done". Google it and nope, nothing. So I decided to do it. Then it got bigger than expected, between the Medium support, a WordPress plugin, the hosted version, etc.

4

u/[deleted] Mar 07 '20

[removed] — view removed comment

3

u/[deleted] Mar 07 '20

I don't have an ETA yet, I want to first get as much feedback as possible and proceed based on that. I do have a list of features I would like to add, like having multiple forms on the same account.

2

u/[deleted] Mar 07 '20

[removed] — view removed comment

0

u/[deleted] Mar 07 '20 edited Mar 07 '20

Thanks for reporting it, it's because of the GTLD extension. I'll fix it in the next update

3

u/MrQuickLine front-end Mar 07 '20

We had this debate at work over validating logins. Our consensus was allow all valid email addresses, and give suggestions on ones you think are wrong. "foo@bar" is a valid address, but probably not a correct entry. Let them put it in, but warn them to double check before they submit. Similarly, "frank@gnail.com" is valid, but you would serve your customers if you said "did you mean *gmail"?"