arrow-left arrow-right brightness-2 chevron-left chevron-right circle-half-full dots-horizontal facebook-box facebook loader magnify menu-down rss-box star twitter-box twitter white-balance-sunny window-close
Make #1: Zoom Backgrounds
8 min read

Make #1: Zoom Backgrounds

5 steps to build your own SAAS tool
Make #1: Zoom Backgrounds
The "Make" series is for those who want to learn how to build complex solution using no-code tools and will be pretty long and detailed.

Today I will be building a simple SAAS tool that generates personalized zoom backgrounds for its customers without any coding. This post will showcase how anyone can make a complex SaaS product in less than 5 hours.

The end result of the zoom wallpaper will look like this:

You can try to create your own background here unzoomed.dmitryv.com

I will be using the following stack to build this SaaS (pic 1):
- Carrd - to create a landing page
- Typeform - to collect the order
- Bannerbear - to generate the zoom background image
- Sendgrid - to send the results to the customer
- Integromat - to connect it all using events

pic 1. The stack we are using to build the zoom background generator

If you are not interested in following all the details, you can scroll down directly to 🏁Results and Lessons learnt in the end of the post.


In this proof-of-concept, I will be using only one background layout template. The user will be able to choose:
- Background image
- Colored overlay
- The text on top of the image will be split into two parts: the left side and the right side. So it's still visible behind your head.

Step 1: Setting up a landing page

I used Carrd.co, as it's probably the easiest way to make a landing page for your new product: unzoomed.dmitryv.com

Carrd.co allows you to use different pre-built blocks for your websites without any coding.

pic 2. Variety of building blocks in Carrd

The website will have a button "Create a background!" that will simply link out to an order form that we are going to make in step 2.

Step 2: Creating a form to collect orders

I used Typeform to build an order form as it allows to make selections using images and there is an instant Integromat integration, which allows us to pick up the order as soon as the user submits the form.

The form will ask the customer's name, email, the text to put on top of  the background, image, and overlay color.

One interesting type of question that Typeform has is a "Picture choice", it allows us to let user choose images. I used it to give the user a choice of the background image and overlay colors.

pic 3. Background selection question

I labeled these two background options as a "Sunset" and "Blue". This is important as I will use these labels later while connecting the tools.

The rest of the form is pretty simple and straightforward:

Step 3: Creating an image template

The next step, the core logic of the product - Zoom background image generation.

I could find only one service that generates images based on predefined templates.

All you need to do is to create a new project and a template. The template should have zoom dimensions 1920 x 1080 and will have 4 layers: text1 (left side of the message), text2 (right side of the message), overlay, background. Layer names are important as we will use them in the next steps.

pic 6. Creating a Bannerbear image template

After building our beautiful template, you need to open the settings to get the  Project API Key which will be used later.

Step 4: Creating an email template

We will  send the results to our users using email. And there is no better tool to do that than Sendgrid. If you are doing this for the first time it might be tricky, but the overall process is almost the same as any other SendGrid setup you need to do.

In this article I will focus on the areas that are not usual:

  1. Dynamic templates:
    Go to "Email API" -> "Dynamic Templates"  and create a template that looks like the images below. The only trick here is to create a URL link to the generated background image. To do this you need to open an HTML view of the template and edit the link. We will use the variable image_url which will be passed to the Sendgrid using Integromat.
<a href="{{image_url}}">Link to download your background!</a></div>

Please, note that the email template also uses the variable {{Name}}.

pic 7. Sendgrid Dynamic template 

The next step is to set up the Sendgrid API Keys to connect Integromat. Go to "Settings" -> "API Keys" and create an API Key with full access permissions as shown in the screenshot:

pic 8. Creating the API Key

Remember the API Key, we will use it in the next step.

Step 5: Integrating everything

pic 9. Integromat sequence

Finally, the most interesting part! We will use Integromat to tie everything together.

Let me describe the whole scenario before we deep-dive into each step:

  1. Firstly, we will receive an event from Typeform instantly after the submission.
  2. Based on customer answers in the Typeform we will send a programmatic request to the BB to generate the image passing the BB template parameters: text1, text2, overlay, background image.
  3. Next step is just a delay to give BB time to generate an image.
  4. After the delay, we will call BB again to get the generated image URL.
  5. Finally, we are sending  the customer name from Typeform and a generated image URL to the SendGrid.

I know it becomes a little bit complex, but we are still going to do it without any code!

Receiving Typeform order form

You will need to add the "Typeform Watch Responses" item

and connect it to you Typeform account using the wizard, it's pretty straightforward.

👉 Sending the BB request

Add an "HTTP Send" request with the following parameters:

  • URL: https://api.bannerbear.com/v2/images
  • Method: POST
  • Headers: Authorization: Bearer <your API Key from BannerBear>
  • Body type: Raw
  • Content type: JSON (application/json)
  • Parse response: make sure you've checked it.
  • Request content:

BannerBear simplifies it a lot by providing a template of the request. You can get its content by clicking the "API Console" button inside the BB project configuration.

pic 10. Bannerbear configuration screen

Copy the request to Integromat and let's fill in the fields.

We need to fill in the Typeform data:

The fields text1 and text2 should use the left and right side texts accordingly. Use the side-menu as shown in the picture.

pic 11. Integromat side-menu to select the data.

The trickiest ones are the background and overlay color fields.

We used the image selection question in the form. In the case of background, we need to know if the user selected "Sunset" or "Blue" background. Integromat has a very useful command to do that Switch. If the user selected "Sunset", we will send  the Sunset background URL to BannerBear, otherwise the Blue background URL. Let's put this together. In my case it looked like this:

{switch(9.mappable_answers.`c1ea69a2-d93d-47c2-9232-6e27129be527`; "Sunset"; """https://storage.googleapis.com/pricepanda-7725b.appspot.com/static/unzoomed/cesar-couto-sKuVjm0xyLY-unsplash.jpg"""; 

"Blue"; """https://storage.googleapis.com/pricepanda-7725b.appspot.com/static/unzoomed/luke-chesser-pJadQetzTkI-unsplash.jpg"""; 

"""https://storage.googleapis.com/pricepanda-7725b.appspot.com/static/unzoomed/cesar-couto-sKuVjm0xyLY-unsplash.jpg""")}

Then we implement similar logic for the overlay color.

Final result should look like the code below. Don't forget to use a side menu every time you want to refer to the Typeform data.

{
  "template": "XXXX",
  "modifications": [
    {
      "name": "background",
      "image_url": {{switch(9.mappable_answers.`c1ea69a2-d93d-47c2-9232-6e27129be527`; "Sunset"; """https://storage.googleapis.com/pricepanda-7725b.appspot.com/static/unzoomed/cesar-couto-sKuVjm0xyLY-unsplash.jpg"""; "Blue"; """https://storage.googleapis.com/pricepanda-7725b.appspot.com/static/unzoomed/luke-chesser-pJadQetzTkI-unsplash.jpg"""; """https://storage.googleapis.com/pricepanda-7725b.appspot.com/static/unzoomed/cesar-couto-sKuVjm0xyLY-unsplash.jpg""")}}
    },
    {
      "name": "overlay",
      "color": {{switch(9.mappable_answers.`92529ec2-f290-473c-a320-3eff41fd0f26`; "White overlay"; """#FFFFFF"""; "Green overlay"; """#44D03A"""; "Black overlay"; """#000000"""; """#FFFFFF""")}}
    },
    {
      "name": "text1",
      "text": "{{9.mappable_answers.`442d867f-3cc9-4f7a-9119-dd612bbf1665`}}",
      "color": null,
      "background": null
    },
    {
      "name": "text2",
      "text": "{{9.mappable_answers.`cb04d289-f6e4-496a-b803-e1502d15e56c`}}",
      "color": null,
      "background": null
    }
  ],
  "webhook_url": null,
  "metadata": null
}

⏱ Delay

Select the "Tools Sleep" widget and set the delay 10 seconds.

pic 12. Setting up the delay between the calls.

🖼 Get the Zoom Background image URL from BannerBear

Use the URL returned by the first call to BB. Then setup the HTTP call as per the screenshot. Don't forget to use the same header parameters as in the first call.

pic 13. Second BannerBear call to receive the image URL

📧 Send the results to user using Sendgrid

Add "Sendgrid Send an Email" widget. Use the Sendgrid API Key created before to add a new a new connection in Integromat.

Setup from fields (email address and a name).

Configure "To" fields. Name and email should be copied from the corresponding Typeform fields.

pic 14. Sendgrid config

Choose the Sendgrid template that we have created before. It should be selectable if you gave full permissions to the API Key.

pic 15. Sendgrid config

Finally, we fill up the Dynamic template data in JSON format.

"Name" attribute should be coming from the Typeform and image_url should be coming from the image_url field from the 2nd BB call. You can refer to the screenshot attached below to see the final configuration.

pic 16. Sendgrid config

The rest of the fields can be left empty.

If all the steps were performed correctly, this should be the end of our configuration!

Let's jump directly to ...

🏁 Results

That's how it should look like:

pic 17. End result!

You can try it on your own: unzoomed.dmitryv.com

I was able to configure everything and launch the product in less than five hours!

Lessons learnt

Lesson 1: If you need to automatically generate images - don't use BannerBear's integration with Airtable. It will only work when you manually pull rows from Airtable.

Lesson 2: Click the save button in Integromat as often as you can. I have ended up with all my configuration lost multiple times.

Lesson 3: Bannerbear is expensive and free tier only allows you to generate 100 images.


👉 Subscribe for the updates now!

Please, leave a comment or contact me if you have any feedback or questions.

My Linkedin, Facebook, Twitter, Instagram, Website, Buy me a Coffee

Enjoying these posts? Subscribe for more

Subscribe now
Already have an account? Sign in
You've successfully subscribed to Untapped by Dmitry Vedenyapin.
Success! Your account is fully activated, you now have access to all content.
Success! Your billing info is updated.