It is easy to use involve.me and our Zapier integration to create a direct post form! This step-by-step guide explains how you can achieve this!
🚨 Important: This integration requires access to the Walls.io API, which can be purchased as an add-on for all plans. API access is also included in our Enterprise plans and some legacy plans.
Furthermore, you'll need to be on the involve.me Starter plan at the least.
1. Sign up to Zapier & Involve.me
To get started, sign up with Zapier (https://zapier.com/) if you haven't already. Zapier is a marketing tool that allows you to connect hundreds of apps without coding skills. Zapier is offering free plans, so you can get started right away!
Next, signup with Involve.me and upgrade to the Starter plan. Involve.me is a powerful form builder that lets you build all sorts of interactive quizzes, forms, and calculators.
2. Enable API access for your wall
In Walls.io, go to "Settings" -> "API Access" and activate the access token:
If you don't have a social wall yet, it's time to create one!
3. Create your project on involve.me
To create a new project, choose "Start from template" as funnel type and "Blank" as the template.
Choose "Thank You Page" as project type and give your project a name:
In the form builder, first add a "Free text input"-field. Choose "Text" as question text, and make sure that the "Answer is required". You can also "Use question as a placeholder" if you want a more compact form:
Next, add a "File upload" field. "Restrict file size" to 25MB and make sure that file-types are restricted to .jpg, jpeg, .png, .gif:
Finally, add a button, set the button text to "Post now!" and make sure the button links to the next page:
Finally, you can customize the "Thank you page" with a personal note:
4. Publish your involve.me project
While editing your project, you can always use "Design Preview" to test your form. When you are done, "Publish" the form. You can use your form by sending people to it through a link, or by embedding the form in your website (similar to the Walls.io widget):
5. Create a test post!
Now open your project and create a test post! This is important for connecting Involve.me to Zapier in the next steps!
6. Choose "involve.me" for the Trigger App
7. Choose "New Completed Submission" as the Trigger Event:
This trigger will be fired every time a new form is submitted in involve.me.
8. Sign in to involve.me
9. Choose "Walls.io" for the Action
10. Choose "Create Post" for the action event:
11. Sign in to Walls.io
12. Customize post
Next, you'll have to "wire" the involve.me data fields to the Zapier action. For the "Text"-field, this is easy - simply choose the "Text" field from the involve.me result. For username, enter "Anonymous" or similar - this is necessary because our involve.me form did not ask for the username. If you prefer to do so, it is simple to extend the form from step 3!
Finally, you have to connect the "Image" field to the file upload from Involve.me. This can be a bit tricky if you have not given the upload field a clear name. In this case, you just have to look out for a random-coded field name - it should be easy to spot since it holds a long image-URL as its value:
13. Test your Zap and publish it!
After publishing your Zap, all form submissions will be automatically sent to your Wall! 🚀 Watch out – depending on your Zapier plan, it might take a few minutes for new posts to appear on the wall!
14. Bonus: Putting it all together
Finally, you can set up a simple HTML webpage to put the involve.me next to (or above) the Walls.io widget. This is how it might look like:
And here's the HTML code:
<html>
<body style="background-color:#e0e0e0;">
<div style="width:33%;float:left;" class="involveme_embed" data-embed="YOURINVOLVEME" ></div>
<script src="https://app.involve.me/embed"></script>
<div style="width:66%;float:left;">
<script async src="https://walls.io/js/wallsio-widget-1.2.js" data-wallurl="https://my.walls.io/YOURWALL?nobackground=1&show_header=0" data-title="Zapier Demos" data-width="100%" data-autoheight="1" data-height="800" data-lazyload="1"></script>
</div>
</body>
</html>
In case you have further questions, don't hesitate to contact the support team via chat or support@walls.io