Table of Contents
Category
tip
This is what we will be doing:
This tutorial will be updated with the changes that are coming to the appspan UX.
A second tutorial will be shared to integrate this like button into a list and detect the correct record ID from that list.
STEP 1: Add the like button
In a custom code block, add this code:
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"</script>
<script src="https://use.fontawesome.com/7ad89d9866.js"></script>
<script>
var data = {};
if (true) data.email = logged_in_user.softr_user_email;
if (true) data.fullName = logged_in_user.softr_user_full_name;
if (true) data.currentURL = location.href;
function like() {
callWebHook('LIKE', data)
};
</script>
<script>
$(function(){
$(document).one('click', '.like-review', function(e) {
$(this).html('<i class="fa fa-heart" aria-hidden="true"></i> You liked this');
$(this).children('.fa-heart').addClass('animate-like');
});
});
</script>Followed by this CSS to style the like button:
<style>
.like-content {
display: inline-block;
width: 100%;
padding: 40px 0 0;
font-size: 18px;
text-align: center;
}
.like-content span {
color: #9d9da4;
font-family: monospace;
}
.like-content .btn-secondary {
display: block;
margin: 40px auto 0px;
text-align: center;
background: #ed2553;
border-radius: 3px;
box-shadow: 0 10px 20px -8px rgb(240, 75, 113);
padding: 10px 17px;
font-size: 18px;
cursor: pointer;
border: none;
outline: none;
color: #ffffff;
text-decoration: none;
-webkit-transition: 0.3s ease;
transition: 0.3s ease;
}
.like-content .btn-secondary:hover {
transform: translateY(-3px);
}
.like-content .btn-secondary .fa {
margin-right: 5px;
}
.animate-like {
animation-name: likeAnimation;
animation-iteration-count: 1;
animation-fill-mode: forwards;
animation-duration: 0.65s;
}
@keyframes likeAnimation {
0% { transform: scale(30); }
100% { transform: scale(1); }
}
</style>Followed by this HTML to show the button:
<div class="like-content">
<button class="btn-secondary like-review" onclick="like()">
<i class="fa fa-heart" aria-hidden="true"></i> Like
</button>
</div>STEP 2: Prepare the link from softr to airtable using Appspan
Signup to appspan
Create an airtable automation trigered by a webhook, and add the URL from that webhook to appspan like this:
STEP 3: Prepare your tables to records likes
On your
users table, create a linked record field to your listings table named likedOn your
listings table, create:A URL field with the link to the page.
You can use this formula:
CONCATENATE("https://www.website.com/listing/",{SEO:Slug},"/r/",RECORD_ID())A linked record field to the user's email (if necessary using an additional lookup field).
STEP 4: Prepare the automation to receive the likes
Your automation will have three steps:
First you find the user who liked by matching the logged-in user email to the
email field in your users table.
This is step a.Then you find the listing that has been liked by matching the current URL to the
url column of your listings table.
This is step b.Finally you concatenate in this order:
- the Name of the listing from step a
- a comma
- the array of names of the `liked` field for the user found in step b.
Here is a quick glance at how I have it set up:
Activate the automation and you are good to go!
