Whenever I launch a new Carrd site, I want to get notified whenever anyone visits the site. Sure, you still have proper visitor analytics with Google Analytics and such, but it is also fun to see visitors in real-time and get a feeling for how many that are visiting from the very start.
This guide will explain how to get Slack notifications whenever anyone visits your Carrd landing page.
Dependencies
Here's what we'll use:
1. Carrd (premium)
2. Slack API
3. Segment io (free account)
Here are the steps:
1. Create a Carrd site premium tier
2. Create Slack webhook URL
3. Create a Segment source
4. Create a Segment destination
5. Add a code snippet to Carrd
1. Create a Carrd site
Disclaimer You'll need the premium tier to be able to add code snippets to your Carrd site.
Let's start by visiting carrd.co/dashboard/add and pick a starting point.
For this guide, let's pick a form template:
Add the texts and finalize the template as you want it:
When you have the copy and the Carrd ready, click on the icon in the right corner. Then pick a title, description, and name the Carrd domain you'd like to use:
Finally, click Publish, and your new Carrd site should be up:
Save and remember the Carrd URL. We'll use it in the coming steps.
Now that you've published the Carrd site let's create a Slack webhook in the next step.
2. Create Slack webhook URL
Start by creating a workspace on Slack. Skip this step if you already have a workspace you'd like to use:
The first step is to create a new Slack app. We'll walk through the steps in this guide, but here is a more comprehensive walkthrough by Slack: Getting started with Incoming Webhooks
Visit https://api.slack.com/apps and click Create New App to start creating a new Slack app:
Choose From scratch:
Then pick a name and the workspace you'd like to use the app. Finally, click Create App:
Now you have a Slack app. Click on Incoming Webhooks to enable webhooks:
Activate incoming webhooks:
Authorize the app and pick the channel to post to:
Once you have activated incoming webhooks, scroll down to Webhook URL and click Add New Webhook to Workspace:
Now that you have an URL, copy it and save it for the coming steps:
We have a Slack webhook URL ready. Let's go ahead and create the Segment Slack connection in the next step.
3. Create a Segment source
Twilio Segment has a generous free pricing tier which includes:
- 1,000 visitors/mo
- 2 Sources
- 300+ Integrations
Visit https://app.segment.com/workspaces and create a new workspace:
Now pick a name and choose a billing email:
Click Get Started once you have a workspace:
Pick the role that suits you.
Pick engineering to avoid further setup questions:
The next step is to create the data source, which will be the Carrd site we created earlier.
Click on Add Source to get started:
Pick Javascript, then click Next:
The next step is to name the source and add the Carrd URL we chose in the first step.
Then click Create Source:
Copy and save the code snippet shown. You'll need to add this to your Carrd site in the last step of this guide. Then click Next:
Now you have the Segment webhook URL. The last part of getting Slack notifications is to add a Slack destination for your Javascript source.
4. Create a Segment destination
The Slack integration we'll be using is located in the Catalog, so visit the catalog in the menu:
Type Slack where you choose destinations, then pick Slack and lastly, click Configure Slack:
Pick the Javascript source we just named and created, and click Next:
This will take you to the step where you pick a name for your destination. Type a name and make sure to choose Classic, then click Save:
In this step, we'll finally set up the Slack destination to send you Slack notifications every time you get a new user.
Start by enabling the destination:
Then click Event channels:
Here's where you pick a name for the event you want to be notified about. I've chosen new visitor and the channel #general - select the name and the channel you'd like to get the Slack message to, then click Save:
Next, click Event Templates:
This will take you to the template setup, where you type the event name you'd like to use. I chose new visitor. Then type the message you'd like to get. In my case that's Carrd site has a {{event}}, then click Save:
That means that for each new visitor, I'll get the following message:
Carrd site has a new visitor
The last step is to add your Slack webhook URL, and click Incoming Webhook URL:
Finally, add the Slack webhook URL we generated and saved in the first step:
And add the URL to your settings and click Save:
If you go back to your Connections, you'll see a red dot indicating that your source is not receiving any data yet:
Let's fix that by connecting your Carrd site with your Javascript source in the last step, where we'll add the source code snippet to your Carrd site.
5. Add a code snippet to Carrd
This last section will add the source code snippet to our Carrd site.
Go back to your Carrd site and click Add new element, then pick Embed:
We'll use the code snippet we generated when we created the Segment source earlier:
Click on the newly created element in your Carrd site and paste the Segment code snippet where the input field says code:
The code input field will look something like this after pasting the snippet:
Before you click on Done, go ahead and add the following code line right after analytics.page();:
analytics.track("new visitor"); // Change to your Segment Event Name
This is the Segment Event Name we added earlier when we did the Slack destination setup:
Add the code line and finally click Done:
You're all set! Save the changes, and we're ready to try it out:
Let's try to visit your Carrd site by visiting the URL we created for it earlier:
Then head back to your Segment dashboard for your Connections. The red dot should now have turned into a green dot, and this means that your Carrd site is sending data to your source:
Let's also head over to your Slack workplace. You should see a message in the channel you chose:
Now you'll get a Slack message whenever someone visits your Carrd site.
Summary
Here's a summary of what we did
1. Created a Carrd site and published it
2. Created a Slack app and generated a webhook URL
3. Created a Segment source and code snippet
4. Created a Segment destination for our Slack workspace
5. Added the Segment source code snippet to our Carrd site
Improvements
Customize your Slack app appearance Customize the Slack app icon and appearance. Visit https://api.slack.com/apps, pick your app and then scroll down to Display Information and customize the icon:
Next steps
Do you need help with implementing your own Slack notifier for each Carrd site visitor? Or do you have other questions? I'm happy to help, don't hesitate to reach out ➡️ norah@quoter.se
Or shoot me a DM on Twitter, I'd love to help out @norahsakal