How to get real-time visitor notifications with Slack for Carrd landing pages

Cover image

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.


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:

Carrd templates

Add the texts and finalize the template as you want it:

Edit the template

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:

Publish the site

Finally, click Publish, and your new Carrd site should be up:

Published site

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:

Create Slack workspace

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:

Create Slack app

Choose From scratch:

Create Slack app from scratch

Then pick a name and the workspace you'd like to use the app. Finally, click Create App:

Pick name and workspace

Now you have a Slack app. Click on Incoming Webhooks to enable webhooks:

Incoming webhooks

Activate incoming webhooks:

Enable webhooks

Authorize the app and pick the channel to post to:

Slack channel to post to

Once you have activated incoming webhooks, scroll down to Webhook URL and click Add New Webhook to Workspace:

Add webhook URL

Now that you have an URL, copy it and save it for the coming steps:

Copy webhook URL

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:

Create a new workspace

Now pick a name and choose a billing email:

Add workspace info

Click Get Started once you have a workspace:

Get started

Pick the role that suits you.

Pro tip 💡 pick engineering to avoid further setup questions:

Pick setup

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:

Add source

Pick Javascript, then click Next:

Pick Javascript

The next step is to name the source and add the Carrd URL we chose in the first step.

Then click Create Source:

Name the 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:

Copy source snippet

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:

Pick catalog

Type Slack where you choose destinations, then pick Slack and lastly, click Configure Slack:

Pick Slack as destination

Pick the Javascript source we just named and created, and click Next:

Pick source

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:

Name destination

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:

Enable Slack as destination

Then click Event channels:

Pick event channel

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:

Pick event channel

Next, click Event Templates:

Pick 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:

Pick event name

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:

Pick Incoming Webhook URL

Finally, add the Slack webhook URL we generated and saved in the first step:

Copy webhook URL

And add the URL to your settings and click Save:

Add webhook URL

If you go back to your Connections, you'll see a red dot indicating that your source is not receiving any data yet:

Check connections

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:

Add new element

We'll use the code snippet we generated when we created the Segment source earlier:

Copy source snippet

Click on the newly created element in your Carrd site and paste the Segment code snippet where the input field says code:

Paste source snippet

The code input field will look something like this after pasting the snippet:

Pasted source 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:

Pick event channel

Add the code line and finally click Done:

Altered snippet

You're all set! Save the changes, and we're ready to try it out:

Altered snippet

Let's try to visit your Carrd site by visiting the URL we created for it earlier:

Published site

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:

Data is flowing

Let's also head over to your Slack workplace. You should see a message in the channel you chose:

Slack message

Now you'll get a Slack message whenever someone visits your Carrd site.


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


6. 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:

Customize app


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


Need tailored AI solutions?

I provide one-on-one collaboration and custom AI services for businesses.

Let's find the perfect solution for your challenges: Consulting Services


Get notified about new posts
Connect with me
Need a custom solution for your business or idea?
Get a tailored blog post on ChatGPT, GPT-3 and GPT-4 to tackle your specific problem.