The UnofficialButton and Bookmarklet

Extending the Slack Button for embedding and page sharing

The latest Slack product release is the Slack Button (blog post, docs), which lets developers integrate the ability to post directly to Slack from within their own app.

This is incredibly powerful: it increases the number of inputs and nodes to Slack. Slack is impressive for being one of the first enterprise products to experience consumer-like virality, and is quickly moving towards being a verb (“Slack it!”)

However, the Slack Button doesn’t currently allow you to embed the button on a webpage to quickly share that link (like the ubiquitous Facebook and Twitter share buttons). I can understand the app-centric approach that SlackHQ took in building the Slack Button, so I thought it would be a cool project to extend the Add to Slack functionality to webpages in the form of two products:

Embeddable Add to Slack button for webpages, the equivalent of the Facebook and Twitter share buttons that are ubiquitous on websites today (a publisher tool)

Bookmarklet for users to share any page from their browser (a consumer tool, and doesn’t require the publisher to embed the Slack button).

My brother Richard and I hacked this together in a day, and we wanted to share the product with you all.

How to add a Slack button to your website

Copy and paste that on any page, and it’ll give you a button that looks like this:

By default, the button autopopulates the composer with the URL the button lives on.

Custom URLs

If you want to customize the url the button auto-populates in the composer, add the following:

data-url="yourURL"

to the <a> tag. This is helpful for example when you’re using this button in a template.

User Flow

The first time a user clicks the Slack button, it will prompt them to OAuth to the Slack team they want to post to.

After that, the button will then pop-up a Composer window, and auto-fill the form with a link.

Some technical specs for the counter

The counter will increment only once per person, per team, to prevent spamming.

If you are on multiple teams, the counter will count each share to a team as a single share.

Multiple users in the same team can share and increment the counter, so we encourage you to get your friends to all use the share button on webpages you like.

Limitations

Due to the way the Slack OAuth API is set up, we couldn’t find an easy way to allow multiple Slack team auths with different email addresses associated with those teams.

So for now, you’ll have to log out and re-auth if you want to post to a different team. If you’ve already logged in to multiple accounts on your browser, it theoretically should give you a team selector for which team you’d like to auth for the button.

The flow makes it easy for you to log out either on the composer page or on the post confirmation page, if you want to re-post to a different team.