Let’s you add a Sticky Floating Button on the bottom right, this button is always within your user’s reach as they navigate the website.
On Desktop - Clicking the button shows up a modal with sharing options.
On Mobile - It invokes the device’s native sharing function for a more familiar user experience.
Feel free to integrate this into your site. Just drop it into your custom code section and tweak as necessary to align with your brand or design preferences.
@funkycoldmedina
You can try to hardcode different numbers based on different pages if it is good enough. Insert the custom code on the page level instead of the app level, and change the code so the right phone number will be different on each page.
If you want to get an actual variable that is changing, I need to get more details to be able to help
It’s a people directory, so each person has a different number and hardcoding is not possible.
I would need to feed this button with a Whatsapp URL I have already created in Airtable, but that is variable for each user. I’m planning to add this button to a detail view.
The expected result would be quite simple: you get to a person’s detail page through a list, and then a WhatsApp sticky button should appear to send a message to that person.
Thank you @akhil_bvs for developing and sharing this with us.
I used your code and changed it a bit to create a feedback functionality:
the button is a feedback button which leads to a Softr page with a feedback form
this form has a hidden field [prefill_FEEDBACK_BUTTON_LOCATION] which is filled with the url of the page when the user clicked the feedback button
This way I get feedback form submissions with the location of where the user clicked the feedback button. I thought it maybe would be a nice thing to share it here.
See below the script I used. And don’t forget to add the hidden field [prefill_FEEDBACK_BUTTON_LOCATION] to your form.
<style>
/* Styles for the emoji wave animation */
@keyframes wave {
0%, 100% { transform: rotate(-10deg); }
50% { transform: rotate(10deg); }
}
#emojiWave {
display: inline-block;
animation: wave 1.5s ease-in-out infinite;
}
/* Modal Styles */
#shareModal {
display: none;
position: fixed;
z-index: 1000;
left: 0; top: 0;
width: 100%; height: 100%;
background-color: rgba(0,0,0,0.4);
}
#shareModal .modal-content {
background-color: #FFFFFF;
margin: 15% auto;
padding: 20px;
border: 1px solid #888;
width: 80%;
max-width: 350px;
box-shadow: 0px 0px 10px rgba(0,0,0,0.5);
border-radius: 24px;
}
.share-link {
color: #007BFF;
text-decoration: none;
}
.share-input {
width: 100%;
padding: 10px;
margin: 10px 0;
border: 1px solid #ccc;
border-radius: 4px;
cursor: pointer;
}
.close-btn {
float: right;
background-color: #007BFF;
color: #fff;
border: none;
padding: 10px 20px;
cursor: pointer;
border-radius: 4px;
}
#shareButton {
position: fixed;
bottom: 10px;
right: 10px;
padding: 10px 20px;
background-color: #3278FF;
color: #fff;
border: none;
border-radius: 1000rem;
cursor: pointer;
box-shadow: 0px 4px 6px rgba(0,0,0,0.1);
}
</style>
<button id="shareButton" aria-label="Visit Specific URL">
Feedback <span id="emojiWave">👋🏻</span>
</button>
<script>
// The specific URL you want to open when the button is clicked
const specificUrl = "/feedback"; // Relative URL to the feedback page
document.getElementById("shareButton").addEventListener("click", function() {
// Get the current page URL
const currentUrl = window.location.href;
// Encode the URL to make it safe for use in a query string
const encodedUrl = encodeURIComponent(currentUrl);
// Create the feedback URL with the prefill parameter
const feedbackUrl = specificUrl + "?prefill_FEEDBACK_BUTTON_LOCATION=" + encodedUrl;
// Open the feedback page in the same tab
window.location.href = feedbackUrl;
});
</script>
