Step by Step to set up greeting card

Ok, Let's start by creating your own free Cloudinary account here.

We need to set up some preparation work.

Cloudinary offer you free 25 credits to use for FREE every month, every credit allow you 1000 impression, so that would add up to total 25000 impression per month for free!

Now, Let's lay some ground work to get this started.

After you login your Cloudinary account, Go to "Media Library" and create a new folder, for example, name it "UChat"

This is the folder we will upload the user's Facebook profile images. And you can also download the "image template" here, and then upload in this "UChat" folder, we are going to use it in the following steps.

Now, you need to set up an upload preset, so click the top right corner "gear icon", and then click "upload",

And then you can create your own "upload preset" as per the screenshot below:

For example, we create an upload preset, name "uchatau", and it’s uploading to the “UChat” folder, and allow you to use unsigned mode to upload, and also have to use unique name & can external define public ID.

And if you go back to your Cloudinary main dashboard, you will find your “Cloud Name” as per the screenshot below, we will need this value in the next step.

So, that's the end of this step, in this section,

You created a folder in your Cloudinary account,

You upload the image template we are going to use(overlay)

You know where to find your "cloud name" value

You have set up a upload preset, which we are going to use very soon.

If all above step is clear, move down to the Step #2

Only Manychat need this step, Other chatbot platform like UChat would have the profile image as the system field.

You can use right away! 😊

But Manychat user will need this extra step.

In this step, you need to use "external request" action to save the user's profile picture into one of the user custom field.

Let's create a new user custom field, for example {{user_profile_pic}}

And then you can set up the external request like below to save the user's profile image into the user custom field.

First, you need to get your Manychat API token here:
‍

And then you can set up the external request like below to save the user's profile image into the user custom field.
‍

Here is the list of details you can follow to set up your own external request:

Request type: Get
Request URL: https://api.manychat.com/fb/subscriber/getInfo?subscriber_id={{user_id}}
Headers:
Key: Authorization
Value: Bearer {{Manychat_API_token}}
Response mapping: $.data.profile_pic -> {{user_profile_pic}}

You can print out the {{user_profile_pic}} value after this external request!

Just to make sure you got this step configured correctly!
‍
‍

In this section, you will learn how to upload the use's profile image automatically to your Cloudinary account.

Only then we can start using the profile image to personalize the greeting card.

So, do you still remember the "Cloud Name" & "upload preset" value in our Step #1, if not. go back to grab these 2 values.

We are going to need them right now.

As you can see from the screenshot above,

Replace the value into your own value.

This external request is about to upload the {{user_profile_pic}} picture into your Cloudinary account.

And as you can see, you have assigned a file name using the {[user_Id}} in the body of the request.

You can find the details external request here:

Request type: POST
Request URL: https://api.cloudinary.com/v1_1/{{cloud_name}}/image/upload
Request body:
{
"file": "{{user_profile_pic}}",
"public_id": "{{user_id}}",
"upload_preset": "{{upload_preset_name}}"
}
Response mapping: $.public_id -> {{fileID}}; $.format -> {{image_format}}
‍

The reason that we need to set up response mapping is that we are going to need these values in the image URL in your chatbot.

If you set up everything properly, you should be able to see the profile image been uploaded to the Cloudinary folder as per the screenshot below:

It should be your own Facebook profile upload. And, you should also have a image in the same folder.

The name is "greeting", if not

Download the template image here, and upload into this same folder as per your profile image.

This is the most important section! 🤭

(you will learn how easy it is to customerize the image)

Please note, Cloudinary is a developer focused tool to allow you to personalised the image.

In fact, a lot of 3rd party image personalization tools based on their platform.

So, it's not easy to customerize the way you want.

But, we have a "Short cut" that can help anyone build their own image personalization.

It's using Cloudinary built-in Image editor! 😉

And in this section, you have the user's profile & the image template, and now we will start do some "MAGIC".

First, let's open your profile image, and then click "Edit", it will open up the built-in image editor.

Every change you make, you can click the "refresh" button on the right image.

it will show you the changes.

So, Let's resize the thumbnail to a "250" width & "250" height, and then in the mode, you can choose "Thumb",

In the Gravity, you can choose "Face", it will automatically detect the face or the interesting part of the image.

Now we have process the profile image.

It's time for us to add the "image overlay".

So click "Add overlay & watermark", and set up the setting per below image

As you can see, in the image ID: you put uchat:greeting.

uchat is the folder name in your Cloudinary account, greeting is the "template image" file name.

The reason we choose "underlay" is to have the profile image visible.

And, you can also adjust the value of x,y, and it will move the profile image to the "proper" location of the image template.

If everything is looking well, you can change the "Layer mode" from "underlay" to "overlay".

And then it will generate the URL from the bottom right corner.

If you open this URL directly. it will show the personalised image.
‍

Now, in the last step, you will need to "migrate" this image URL into Manychat flow.

And it's very important that you can dynamic replace the values in the URL.
‍

In the image URL generated, you can see, it's a long URL.

There are 3 places, you need to update to your own value or using user's custom field to dynamic replace in the chatbot.

(See these values in Yellow hightligher)

1. Change to your own "Cloud name"
2. UChat:greeting: use your own folder name & image template name
3. UChat/4390690630.jgp this value is saved in the "upload image to Cloudinary" external request. The value should be saved into {{fileID}}.{{image_format}}
‍

So, anywhere in your chatbot, you can insert the image, but using this URL.

It will generate the personalized greeting card email to your subscribers.
‍

Here is two actions, that set up the user's profile image, and then "upload the profile image" to the Cloudinary account.

And then you can connect directly the image to show the personalized image.

That's how simple it is to complete your first image personalisation.

You did great so far! 💪

You have learned how to add image overlay to a sample image template.

You also familiar with Cloudinary built-in image editor, which can make job super easy for you.

But, do you know that you can add more overlays?

Do you know you can add text overlays? and adjust the font size, styling, etc

Here is a sample image template you can learn from the "Image personalization Mastery" course!

You will find more ready to use image template in the training course, some example below

• Certification sample
• Hoodie sample
• Business card sample
• Coupon code sample
• Magazine sample

Check the image template sample below

In this course, you will be able to install the ready to use chatbot template for Manychat & UChat.

You can simply follow our walkthrough videos, and ready to use within 5 mins.

In this blog post, you can see all the important steps. If you can't follow some of the steps, you will find it much easier to follow our video tutorial.

It's step by step, and will explain everything in great details.

Also, you will be able to ask questions in our Facebook community, we can help you to "master" this.

You can get instant access for $199 one time payment here, or learn more about the course here.

(If you join our Facebook community & subscribe to our Youtube channel, We have a surprise for you!)

if you join our Facebook community here, take the screenshot.

If you subscribe to our Youtube channel, take the screenshot.

If you share this blog post to your social network, you are qualified to win the giveaway, and get this $199 value course FOR FREE!

Conclusion

Hope you learn a ton about how to set up personalised image in your chatbot.

Keep your subscribers engaged and converting 🤓

Good luck!