Want to make your Showit button pop with a fun, interactive effect? With this easy custom code snippet, you can add a beautiful ripple animation that starts exactly where you click on your Showit button. It’s a simple way to make your site feel more dynamic and engaging—no coding experience required! Just copy and paste the code, and your buttons will come to life with a modern ripple effect that responds to every click.
Step 1:
Add the following code to your Showit site
<script src="https://cdn.jsdelivr.net/gh/Pratik-Khaling/doitwithshowit@main/showit-button-ripple.js"></script>If you are using a canvas set, add the code to the Head of your website under Integrations→ Add custom code→ Add code to the head
If you are not using a canvas set, add the code to Advanced Settings → Custom Head HTML
Step 2:
Add a class name to your Showit button using the Advanced Settings → Class Selectors option in the following format:
ripple-yourHexCodeFor example, if you want a red ripple color, your classname will look like this:
ripple-fff000Do not use #, simply type the hexcode.
Another example for a white ripple:
ripple-ffffffAnd That is it!
That’s all it takes to give your Showit button a modern, eye-catching ripple effect! With just a quick copy-paste and a simple class name, you can instantly upgrade your site’s interactivity—no coding headaches, no complicated steps. Try out different colors to match your brand and watch your Showit button come alive with every click. Enjoy your new, dynamic Showit experience!