What is an image block?
An image block allows you to ask questions and receive responses in the form of images, letting your bot handle scenarios requiring visual evidence.
Why use an image block?
Incorporating an image block in the conversational flow makes it easy for customers to submit pictures directly through the chatbot interface. For example, if a user receives a damaged product, they can provide visual proof by uploading an image of the product.
Steps to create an image block
1. Click the add block icon (+)
2. Choose Image under the Question Cards section.
If you try to close the block listing without saving the image block, all the unsaved changes will be lost permanently.
3. Add the Question in the question field.
4. Choose the image Format options you want your user to send the images in, then click Save.
GC approves the following image formats. You can deselect the ones you don't need:
- WhatsApp channel only supports jpeg and PNG formats
5. Add a unique name for your block in the Block name field.
If you enter the name of an existing block for another block, the following error will be displayed. 6. Input variable will auto-populate according to the added block name. You can change it if needed.
7. Adjust the existing Validation Error Message to fit the context of your image block.
8. Click the Preview block option to see how the block would be displayed to the user.
9. Click on the Preview block option to see how the block would be displayed to the user.
10. If you are satisfied with the output, click Save.
- If this block is not mandatory for your user to answer, toggle the option to Skip Block on. This option is not available for flows of WhatsApp, Telegram, and Facebook Messenger channels.
- If you want to keep this block as the end of your conversational flow, toggle the End block option on.
- Image files can either be dragged and dropped or attached and the limit should not exceed 14 MB.
- For WhatsApp, Telegram, and Facebook Messenger, the limit cannot exceed 10 MB.
Editing the image block
You can edit an image block whenever required, even after the flow is published or in the drafts section, by following these steps:
1. Open the flow and click Edit.
2. Click the Image Block, which you may have named differently.
3. Click Edit Block from the displayed options.
4. Make the required changes to the block and click Save.
5. Click Save.
6. Publish the flow.
Copy an image block
The Copy Block option can be used when you need to reuse a block that you previously created; you can copy that block and add it to your flow as it is or edit it according to the requirement.
1. Click the Image Block you wish to copy.
2. Choose the Copy Block option. The block will be pasted on the clipboard.
3. When you require to paste that block, click the Add block icon (+).
The pasted block would appear on the block listing section and be stated as From Clipboard.
4. Edit the block if required, or simply click Paste.
- The copied image block can be pasted multiple times. If you no longer need to paste it, you can clear the clipboard by clicking on the close icon corresponding to the clipboard option.
- When copying an existing image block, all of its content, including variables, if any, will be copied as it is. You can edit it as required before adding it to the flow. Since the names of each block must be unique, the word '_copy' will be added to the copied blocks automatically. This can be changed, if required.
- If you have copied a block and it is in the clipboard, deleting the copied block later will also remove it from the clipboard.
Deleting the image block
1. Open the flow and click Edit.
2. Click the Image Block, which you may have named differently.
3. Click Delete Block from the displayed options.
4. Confirm deleting the selected block by clicking on Yes, Delete it.
You can use the undo option to restore a deleted block as your following action, but not otherwise.
5. Click Save.
6. Publish the flow.
- If you delete a block while an end user is engaged in a live session with the bot, the previous version of the flow will be rendered until they restart the conversation.
- After making changes, you need to republish the flow for those changes to be reflected in an end user's session.
If the deleted block has dependencies, such as given below, errors will be displayed.
Path below the block:
If the deleted block was used to jump to a different flow:
Use case
A customer from the online store Zylker Electronics received their order but encountered an issue. They immediately visited the website and started a conversation with the bot.
During the interaction, the customer reported that the gadget they received was faulty. As the quality check process required visual proof of purchase to verify it matched their order details, the bot requested an image of the receipt. The customer attached the image of the invoice. Examples of the image blocks in a flow
Proof of purchase
The support team requires visual proof of purchase to verify the customer's claim and ensure it matches their order details.
Bot Prompt: Can you upload an image of your receipt or order confirmation?
Input given in the builder:
GC widget's output:
After the user adds an image of the receipt and submit:
Best practices
Clearly explain to the user what kind of image you need and why. For example, "Please upload a photo of your ID for verification purposes."
Specify maximum file size limits and suggest ways to reduce file size, if necessary.
Clearly inform users how their images will be used and ensure compliance with data protection regulations.
Provide an option for the users to review and, if necessary, edit or replace the image they uploaded.
Supported channels
The image block is supported in the following channels:
- WhatsApp
- Telegram
- Facebook Messenger
- LINE
- Instagram
- Business Messaging
A total of 500 blocks can be added in a flow. If you reach that count, you can use the jump block to create a new flow or delete unnecessary flows.