Webflow + Anvil Demo - Bitcoin Dip Catcher

I’ve heard great things about building awesome looking sites on Webflow, so I started exploring how to make an Anvil powered Webflow site and I think I’m on to something.

Originally, I had built this landing page with anvil where people can sign up to the email alerts triggered by the bitcoin trading algorithm I developed on TradingView. https://dipcatcher.com/


Then, i signed up for webflow, found a template I liked, and used it to draft some marketing copy. I embedded the bitcoin investment calculator I built with anvil into the webflow site and it just worked. Then I setup a webhook to send the webflow signup form data to my anvil endpoint where I save the user submission in my anvil db. It literally worked first try. This is the signup page

The request body looked like this:

{'name': 'Email Form', 
'site': '5e604f32735e376d5427d', 
'data': {'Email': 'hello@joinlook.com', 
         'Low Risk': 'true', 
         'Mid Risk': 'true', 
         'High Risk': 'false'}, 
'd': '2020-03-22T06:18:49.274Z', 
'_id': '5e770349c79e1c5457b6c'}

Where ‘Email’, ‘Low Risk’, ‘Mid Risk’, and ‘High Risk’ are the names of the text field and checkboxes in my webflow form.

Here’s what the stack looks like:

This is a first draft, so theres still lots of Lorem Ipsum in the webflow site but you can still check it out.
https://dip-catcher.webflow.io/

The ‘buy bitcoin’ email alerts are live, so if you sign up, you probably only want to check low risk and mid risk because ‘High Risk’ alert sometimes sends up to 6 per day which can be overwhelming if you aren’t actively trading.

Since marketing/design people love Webflow, I think if we can promote anvil as the easiest way to build scalable backends for webflow sites we will attract an awesome new crop of folks to our community over here. I will continue to explore this front and share my findings.

11 Likes

What apart of your app https://dipcatcher.com/ is webflow.? The general layout looks like anvil.
I am looking to do something similar building landing pages and information pages for my app.

Can you remove “websflow” from your URL?

dipcatcher.com is all anvil. the dip-catcher.webflow.io example was webflow. You can remove webflow from url with paid plan.

I have a question. Does that mean in order for Anvil + Webflow to work, potentially one would need to pay for both hosting costs (Anvil + Webflow)? Assuming, the final web app is commercial.
Would it be appropriate to sum up your approach as Anvil (backend) + Webflow (frontend)?
Looks like it would be more attractive if we can generate custom webpages for Anvil using editors etc. I know this is possible for expert users who know a lot of HTML, CSS etc. but for typical Anvil users, this may be too much to ask. Wish there’s some cool integration between Anvil and Webflow or even Adobe.

yeah exactly, this was an example of how to generally integrate the two. But the thinking was to be able to leverage the webflow templates for the bulk of the customer facing site, and then as needed embed anvil components into the webflow theme and pass data collected in webflow back to anvil.

something I havent tried but I want to is to export the HTML/JS/CSS from a webflow design and then turn it into an anvil template.

1 Like

Just did a little more digging. Yes, looks like you can export all the codes in webflow if you have lite plan subscription and above.

Definitely worth some exploration. The first person to crack this and post a video tutorial will be immortalized forever by the Anvil community…

2 Likes

I’m no lawyer, but I’m fairly sure that would be in breach of the terms of service that you agree to when you register a webflow account. Section 5 is pretty clear about what they own and how you are licensed to to use it.

2 Likes