Use images and videos in Einstein Bot

Posted on December 22, 2020 Post Thumbnail

Hi Trailblazer, In this blog I'm going to use Images and Videos in Einstein Bot.

Before start, Let's have a look on demo :)

For a quick demo click on right bottom button "Chat with an Expert"

 Images in Einstein Bot :(

Images in Einstein Bot

Youtube video in Einstein Bot :(

Youtube video in Einstein Bot

That's all about quick demo.

If you're new to Einstein Bot :)

Check out following blog posts.

How To Put Einstein Bot On Any Website Using Salesforce.

How To Setup Web Chat On A Website Using Salesforce And Chat With Viewers In Real Time

Walkthrow :)

1. I have created a package, First we'll install that package in Salesforce Org.

2. After that, We'll add component in Embedded Chat.

3. In last, We'll update and create some dialogue in Einstein Bot.

Let's Start :)

All you need to install the following Unmanaged Package in Salesforce Org.

Install me :)

When you'll click on it, You need to log in.

And install the package.

And install the package.Installation complete.

Installation complete.

This package contain a Lightning Component.

chatMessage

This package contain a Lightning Component.

Now, Got to Embedded Service Deployments.

Got to Embedded Service Deployments.

Click on Edit.

Edit it.

Scroll down to Customize with Lightning Components

And choose chatMessage.

And choose chatMessage.

Now, We need to update Dialogs in Einstein Bot.

Go to Einstein Bot Builder.

Go to : Setup > Einstein Bots > yourBot

After clicking on your Bot, You'll go to Einstein Bot Builder.

After clicking on your Bot, You'll go to Einstein Bot Builder.

Now, need to update Dialogs.

If a message in Einstein Bot starts with

RICH_TEXT:<RICH_TEXT_CONTENT_INCLUDING_SUPPORTED_HTML_TAGS>

Shows the message in rich text format.

YOUTUBE:<YOUTUBE_VIDEO_ID>

Shows the youtube video in chat window.

IMAGE:<IMAGE_URL>

Shows the image.

NAVIGATE:<TARGET_URL> 

Opens the url with a new browser window (tab).

URL:<TARGET_URL> 

Shows the OGP info.

PLAIN_TEXT:<MESSAGE>

Shows the message in plain text format.

In my case

For Image :

IMAGE:https://sdk.bitmoji.com/render/panel/2af24209-ea90-4912-9223-4c54c650559a-9749ddf3-1150-4476-b02e-384e6c52f72b-v1.png?transparent=1&palette=1&size=50%
image

For Video :

YOUTUBE:rAA4zUpHX3o
Video

For Rich Text

RICH_TEXT:<a href="https://www.heysalesforce.org/questions/create">Ask me</a>
Rich Text

After updating all the Dialogs

Activate the Einstein Bot and Test it.

Click on right bottom button "Chat with an Expert"

Image.Video.

As you can see, It's working now.

This is how we can use images and Videos in Einstein Bot.

If you want to get the code of the component click on following repository.

I took reference from this repository

I hope It'll help you somehow.

If you have any question Ask Me

Thanks for Reading :)

Write a comment for suggestions and hit the heart icon.


5393
11

Tags: #chatBot

Comments

  • Dario Avatar
    Dario - 1 year ago
    Hi, this is a great tool, do you think is t possible to add in image in Prebuilt Dialogs ? thanks

    Asif Ali Avatar
    Asif Ali - 1 year ago
    No, We cannot add images in prebuilt dialogue. You have to follow this blog post for images.

  • Selim Avatar
    Selim - 1 year ago
    Hi, thanks for this tip. In the Einstein bot builder, it's ok but when i move the bot on my utility bar, I cannot see my image or url. Instead Of, I have something like IMAGE:https://sdk.bitmoji.com/render/panel/2af24209-ea90-4912-9223-4c54c650559a-9749ddf3-1150-4476-b02e-384e6c52f72b-v1.png?transparent=1&palette=1&size=50%. Can you help me?

  • DuyNguyen Avatar
    DuyNguyen - 11 months ago
    Hi, It's ok but it working good for the chatbot of website, but not working for chatbot of app and facebook, when I add chatbot to messening channel and add chatbot to app.

  • Elad Avatar
    Elad - 11 months ago
    Hi We use RTL language in our chat. There is any chance to support RTL text in Chat? Also, when I use RICH_TEXT with other language its not supported Thanks

  • Abishek Avatar
    Abishek - 9 months ago
    When I use RICH_TEXT: prefix, the URL in the anchor tag href attribute gets appended to the current page URL making it look like <CURRENT_PAGE_URL>/'<HREF_URL>'. Please fix this issue or let me know if there's a workaround.

  • Jhonatas Jesus Pinto Avatar
    Jhonatas Jesus Pinto - 9 months ago
    como que faz pra ele aparecer no IOS e no Android, a imagem e o video não sao copilados nos videos

  • Jhonatas Jesus Pinto Avatar
    Jhonatas Jesus Pinto - 9 months ago
    nos bots q estou no IOS**

  • Desiree Avatar
    Desiree - 7 months ago
    Hello thank you very much! You helped me solve one of the problems, now I have another question, can I save an image that the client sends to an object? for example Cases. Thank you.

  • David Captur Avatar
    David Captur - 6 months ago
    Hello! Very cool tool :) Is there a way to ensure the chat keeps scrolling down after placing an image? So far it seems when an image is placed, customers has to scroll down himself/herself, unlike when text is pasted. Thanks.

  • Pranathi Avatar
    Pranathi - 6 months ago
    Hello! Thanks for the solution. It helped me a lot. I had an issue. When 'navigate' is used the links open in a new tab perfectly well. But when close chat is clicked all the URLs which were opened before opens again. Any idea how to resolve this? Thanks

Your message is required.

Get notified of new posts