Back

⚡️Zapier + Chipp: Monetize No-Code AI Apps

With this guide, you can integrate Zapier and Chipp to start monetizing your idea from day one. No code required. Follow these 12 simple steps to get started.

Integrations

Scott Meyer
 
March 25, 2024

Easily monetize your no-code app using Zapier and Chipp.

Chipp creates a pay-per-use credit system. Zapier connects online tools. Use them together to create a payment alternative to monthly or yearly charges. It is a perfect solution for AI apps, where monthly subscriptions provide a barrier to adoption, and AI costs make freemium untenable for developers.

Currently, the integration is unlocked by clicking on this invite link. After accepting the invite, you’re ready to get started.

This video and corresponding guide walk you through how to do it. 👇

Connect Chipp to Zapier in 12 Quick Steps

Step 1: Generate Unique User Identifiers

When a new user signs up for your app and is added to your database, ensure each user has a unique identifier, often called a UUID (Universally Unique Identifier). This UUID is crucial for tracking each user's actions and credits.

Step 2: Create a Chipp Account


Visit chipp.ai and create a Chipp account. Set up a new app, give it a name, and determine the number of free trial credits you want to offer your new users. In the branding and checkout page settings, customize your logo and select an accent color. Don't forget to save your changes.

Step 3: Set Up a Zap for New User Registration


Create a Zap in Zapier that triggers when a new user is added to your database. In the second step, pass the user's UUID to Chipp's 'Get user credits' event. This action both creates a new 'consumer' in Chipp related to your unique user and returns the number of credits the user has. Ensure that you copy and paste the API key from Chipp into your app's integrations tab in Zapier when configuring Chipp.

Step 4: Update User's Credit Balance


Look up the row in your database corresponding to the user by searching for their UUID. Update that row with the number of credits returned by Chipp in Step 3. If your database doesn't have a field for credits, make sure to create one.

Step 5: Display User Credits


Now, you need to display the number of credits your users have in your no-code interface. Create an element that fetches the value from the credits column and displays it in your app, either on the main interface or the user's account or profile page.

Step 6: Enable Credit Spending


Create an input field in your no-code interface to allow users to spend their credits. This field will take the user's text input, mix it into your predefined prompt, and send it to an AI language model like OpenAI's GPT-3 or GPT-4.

Step 7: Set Up Zapier for Credit Spending


In Zapier, create a new zap that triggers when the user clicks the generate or send button in your interface. Pass both the user's input and their UUID to Zapier. You may need to set up a webhook in Zapier to respond to the 'on click' event of the button in your app. *Follow your no-code app's documentation for guidance.

In the second step, choose the 'Get user credits' event in Chipp and pass the user's UUID to check their credit balance. Set up Paths in Zapier with one rule for users with less than 1 credit and another for users with more than 0 credits.

Step 8: Top Up Credits for Low Balance


If the user has less than 1 credit, they need to purchase more. Choose the 'Get URL of the hosted package purchase page' event in Chipp. Pass the user's unique identifier and input the URL of the page to redirect the user to after checkout. This could be a thank-you page, the home page, or the user's profile page.

Step 9: Implement Advanced AI Features


For users with available Chipp credits, this is where the ✨ magic happens ✨. In this example, we'll use the 'send prompt' event with OpenAI. Configure the model, add the user's input, and let the AI work its magic.

*Don't forget to configure OpenAI with Zapier by pasting your API key from your OpenAI account.

Step 10: Display AI Output Store


OpenAI's response in your database, and decide where in your no-code app's user interface you want to display the output. (Typically, placing it near the input field is a good choice.)

Step 11: Deduct Credits for AI Processing


Create a 'deduct credits from user' event in Chipp, pass the user's UUID, and specify the number of credits this action costs the user.

Step 12: Update User Credits


In Chipp, create a 'Get user credits' event (similar to Step 2 in your Zap) to return a value with one less credit. Find the user in your database by searching for their UUID, and update the credits column with the result of the second 'Get user credits in Chipp' event. This will automatically update your no-code interface to inform the user that they've spent a credit.

Start Building and Share Your Apps

🎉 Congratulations! You've successfully implemented a pay-per-use credit system in your no-code AI app, allowing you to monetize your idea from day one.

Now, it's time to spread the word about your amazing app, which doesn't burden users with monthly subscription fees. As you expand and add more advanced features, you can consider transitioning to a monthly subscription model, all of which can be easily handled by Chipp.

Share your app with Chipp on X or LinkedIn.

Law Prompt AI is an example you can refer to. They recently wrote about their experience integrating Chipp with Bubble, which can provide no-code inspiration.

Happy building! 💪

Enjoy monetizing your prompts and remember to protect your secret sauce in the world of no-code and AI!

Try Chipp for free