How to Become a Chatbot Ninja in 7 Days
Module 3: Lesson 3.3. The dynamic coupon generator (HOT!)
Lesson 3.3. The dynamic coupon generator (HOT!)
I'm calling this chapter HOT because after posting a link to a demo of this feature, my inbox went insane. Everybody wanted to know how this is done and I'm going to tell you how;-).
This feature is by far the most popular gadget we wrote. Hundreds of people engaged with it the First day and we have never had more friend requests or messages asking how we did it.
Although it is pretty easy to do, it did help we have a lot of experience so we knew where to look at what to use to get it right. I remember me doing a similar thing when my son was born, 11 years ago. On his proud parent’s website, we kept track of his exact age so family could check the website and get a dynamic header image on which we counted the days, even hours and displayed it (i know, only parent do these crazy things:-)).
For these coupons, we did the same sort of thing.
What you’ll need is this:
- a little scripting in PHP (with GD or Imagick library);
- an image (900×900 pixels) for the coupon, gift or offer;
- your favorite font(s), and;
- some of ManyChat’s awesome Dynamic Content actions.
If this already makes you dizzy, DON’T BE! I will teach you how to do it and if you’re not a bronze member, I will give you the entire script and we’ll even host it for you if needed (if you have the right membership).
If you’re a bronze member, I will still teach you how to do it, but you will not get an exact copy of the script (you can still copy paste it) and you’d need your own hosting.
Excited? You should be! It is so cool and it has so many uses. Imagine this: a personalized Fitness Coupon, A Personalized Giftcard you can send to somebody else, A coupon for free pizza, free drinks, a donut, coffee, a Test Drive, the list is endless.
Ready? Let’s start making the cool stuff…
Creating the PHP Files
First, we are going to create the PHP file that retrieves the data sent from ManyChat to your server. We call it lesson.3.3-dynamic-coupon.php
This file processes your ManyChat data. As you can see there's an include command that calls the next script, the script that creates the actual coupon image.
YOU HAVE TO CHANGE LINES 34 AND 45 TO MATCH YOUR OWN DATA
Next in line is the PHP GD Magic that makes the default coupon.jpg into a nice, personal coupon your visitors will LOVE!
The included PHP (lesson.3.3-dynamic-image.php) file looks like this:
A few things are important for this file to actually work well.
First, you need to have a coupon.jpg file with your image (900x900) and save it in the same folder as your PHP script. Furthermore, the FONT files have to be in your serverfolder as well. If you do not include a font file, PHP cannot write to your image.
When you did the things mentioned here and your image looks way off, play with the settings for the XY coordinates. Not all fonts and images are the same and you may want to get your text at another location. It's a bit of trial and error until it is perfect!
Sending the header request to your PHP script with the variables
In the previous lesson we sent the dynamic content request with POST variables. In this version we use a REQUEST BODY.
The entire flow does look like this. Note: this is a brief version of what the dynamic coupon does. You can make it into everything you want (and I would love to see you go ALL-OUT)