Chat & Messaging - Image Preview in Multiline Input

[laura1]

Hi Zeroqode Team,

I just found out about and subscribed to your Air Chat & Messaging Pro plugin. However, I had already built a chat feature before I discovered your plugin . I was so close to getting what I built to work like I wanted it to, but got stuck on uploading images and files to the chat. Specifically, I couldn’t figure out how to create a preview of an image in the multiline input before the user sends the image. Also, I couldn’t figure out how to allow users to send a message along with the image. The Air Chat plugin also allows users to type a message along with the image they are sending. It even allows users to send an emoji along with an image. Please see screenshot below.

Air Chat Plugin:

How does the plugin accomplish this? I would really like to know because I’m trying to learn as much as I can and that was driving me crazy haha. Below is what my chat feature looks like when sending images.

My App:

First, the user didn’t even know that an image was selected and ready to send, because I couldn’t figure out how to render a preview in the multiline input. Then, I couldn’t figure out how to allow the user to add more text before sending the image.

Also, how did you make it so that users could use the ‘Enter’ key to send a message? I couldn’t figure that out either, so users have to click the send icon.

Lastly, how did you render a URL as a link in the chat message? Below is a screenshot of how a link turned out in my app versus the Air Chat plugin. Your plugin wins again!

My App:

Your Plugin:

Thank you for educating me!

Warmly,

Laura

[mina.rotari]

Hi @laura1 ,

Thank you for your message, and I’m glad to hear that you’ve subscribed to the Air Chat & Messaging Pro plugin! I see you’re making good progress, and I’d be happy to help you with the features you’re working on. Here’s how you can accomplish everything you mentioned:

Here’s how you can achieve the desired features based on the plugin’s settings:

1. Preview Image in Multiline Input:

The plugin allows you to show a preview of an image before sending it. To accomplish this, you need to make use of the “Uploaded Files” field in the Bottom Bar Settings.

Steps:

• When an image is uploaded, it will be added to the “Images In Message” field.
• This field will display the image as a preview within the chat input area (multiline input) before sending.

2. Send Image and Text Together:

You can send both text and images as part of the same message using the “Send Message” action.

Steps:

• Message Text: This will store the text entered by the user in the input field.
• Images In Message: Store the uploaded image(s) here as a list of images.
• When the Send Message action is triggered, both the text and the image(s) will be sent together in one message.
  
  

3. Send Emoji with Image:

Emojis can be added directly into the Message Text field. The emoji will be sent alongside the text and image.

Steps:

• Simply insert the emoji into the Message Text field.
• The emoji will appear with the image and text in the message bubble once sent.

4. Send Message with Enter Key:

By default, the Air Chat & Messaging Pro Plugin supports sending messages when the Enter key is pressed in the multiline input field. This is the default behavior and should work without extra configuration.

Steps:

• Ensure the Bottom Bar Settings are correctly set for the Send Order to allow the send button and input to be aligned properly.
• When the user presses Enter, the message will be sent.

5. Render URLs as Clickable Links:

The plugin will automatically render any URLs included in the Message Text as clickable links. There is no need for additional setup for this feature.

Steps:

• Simply include the URL within the Message Text field, and the plugin will automatically detect it as a link.

Summary:

• Image Preview: Use the “Images In Message” field to show the image preview in the input area.
• Send Image + Text: Use the “Send Message” action, passing both Message Text and Images In Message.
• Send Emoji: Add emojis directly in the Message Text.
• Enter Key: The Enter key is supported by default to send messages.
• URLs as Links: URLs in the Message Text are automatically converted to clickable links.

I hope this clears everything up! Please feel free to reach out if you need further clarification or assistance.

Best regards,
Support Team
Browse all Zeroqode Plugins for Bubble