How to integrate teneo chatbot with a website
Hi, to add a teneo chatbot to your site, you can use the Teneo Web Chat: https://www.teneo.ai/engine/channels/teneo-web-chat
Hope this helps.
I have visited this link already.Can I get more detailed docs or any video links if you haveā¦
Hi, to be honest, I am not a Shopify expert but I had a look around. From what I understand, to add Teneo Web Chat to your Shopify site, I think you would need to do the following:
Before you start, make sure you have published your bot (https://www.teneo.ai/engine/getting-started/publish-your-solution) and make sure you have the Teneo Engine url (https://www.teneo.ai/engine/api#engine-url)
To add the Teneo Web Chat to your Shopify site:
1 - Download Teneo Web Chatās main.js file from here: https://github.com/artificialsolutions/teneo-web-chat/releases/tag/v2.5.1
2 - In Shopify upload the file to your theme>assets.
3 - Call the reference in the HEAD section of your theme, like so
{{ 'main.js' | asset_url | script_tag }}
4 - Add the following code to your theme, right before the </body> tag:
<div id="teneo-web-chat"></div>
<script>
window.onload = function () {
if (
window.TeneoWebChat &&
typeof window.TeneoWebChat.initialize === 'function'
) {
var element = document.getElementById('teneo-web-chat')
var teneoEngineUrl = 'https://some.teneo/engine-instance/'
var closeEngineSessionOnExit = 'no'
var headerTitle = ''
var headerIconUrl = ''
var extraEngineInputParams = {}
window.TeneoWebChat.initialize(
element,
headerTitle,
teneoEngineUrl,
closeEngineSessionOnExit,
headerIconUrl,
extraEngineInputParams
);
}
}
</script>
Make sure that you add change the url https://some.teneo/engine-instance/ in the script above to the url of your published solution. That should do it.
As said, Iām not a shopify expert, this is all based on instructions I could find on the web. Hope it helps.
Kind regards,
Lucas
FYI, I basically used the instructions I found here: https://community.shopify.com/c/Shopify-Design/How-to-add-javascript-files-to-shopify/td-p/123147
Thank you so much for the helpā¦Was able to integrate finally :).
Ā·Ā·Ā·
On Fri, Jul 3, 2020 at 6:03 PM Lucas via Teneo Developers Community <teneo@discoursemail.com> wrote:
| lucas
3 July |
- | - |
FYI, I basically used the instructionsI found here: https://community.shopify.com/c/Shopify-Design/How-to-add-javascript-files-to-shopify/td-p/123147
Visit Message or reply to this email to respond to developers, lucas, QATest.
To unsubscribe from these emails, click here.
Thatās great news!
I would like to get help on more ā¦Can you pls let me know how images and urls be included in output parameters.Any sample example or solution which i can refer to.Went through the docs could see only json templates.It would be great if you can guide me furtherā¦
I think this page might be what you are looking for:
The page describes how to add an output parameter with an image for Facebook Messenger, but the same principles apply to Teneo Web Chat. In short:
- First you add an empty flow variable in which you will store the JSON for the image. On the page linked above, the part to actually create the flow variable is omitted. If needed, you can find info about that here: https://www.teneo.ai/studio/flows/concepts/flow-variables
- You add a script node to your flow (usually right above the output node that will get the output parameter)
- In the script node, you add code that will produce the JSON and store the JSON in the flow variable
- You add an output parameter to the output node, and you pass on the flow variable as the value (like this: ${myflowvariable})
Thanks for that detailed infoā¦
-was able to get image in chat using json directly in output parameter.
-but when i tried to put json inside script node and assigned to flow variable could not get the picture.
1.flow variable created is :TestImage
2.script node json
TestImage={
ātypeā:āimageā,
āimage_urlā:āhttps://cdn.shopify.com/s/files/1/0423/1702/1335/products/8C65F937F11F_9100beddaf_360x.jpg?v=1593650529.jpgā
}
then called ${TestImage} inside following output parameter.but couldnt get image in chat
can you pls advise
When you are using script nodes, the code you put in there should be Groovy. There are several ways to produce JSON in Groovy and you are getting close but you will need to do a bit more.
What it looks are doing in your script is populate the variable TestImage with JSON directly. Sadly, that will not work.
What you should do is first populate a variable inside your script with a Groovy object. The code looks very similar to your example above, but note the square brackets (also, your example above seems to use ācurlyā quotes which can cause issues, but that may just be a result of copy/paste):
def myImageObject = [
"type":"image",
"image_url":"https://cdn.shopify.com/s/files/1/0423/1702/1335/products/8C65F937F11F_9100beddaf_360x.jpg?v=1593650529.jpg"
]
The code above creates a variable myImageObject and because it is preceded with the word def it is only available inside the script node. Once the script has finished, this variable is gone and the flow is no longer aware of it.
So, we now have a variable that contains a Groovy object and that will be gone once the script has finished loading. That means we have two things left to do: 1) make sure that the Groovy object is converted to JSON. 2) Make sure the JSON is stored in your flow variable TestImage so the flow can use it even after the script has finished.
We can do that like this:
TestImage = new groovy.json.JsonOutput().toJson(myImageObject)
The full script looks like this:
def myImageObject = [
"type":"image",
"image_url":"https://cdn.shopify.com/s/files/1/0423/1702/1335/products/8C65F937F11F_9100beddaf_360x.jpg?v=1593650529.jpg"
]
TestImage = new groovy.json.JsonOutput().toJson(myImageObject)By the way, you can find more info on Groovy and JSON here:
Thank you so much Lucas for clearly explaining it and I have a better understanding now.I am new to groovy and thanks a lot for helping me out.
I wanted to try this way,but my studio has been showing āModel training in progressā for quite sometime and Iām not able to publish the solution.Can you please advise.
Kind Regards,
QATest
Attaching another screenshots. I am not able to build anything new.the solution is not getting trained.
Hmm. Do you see any warnings in the Response info tab in Tryout?
Ok, let me see if we can restart your backend. Can you logout of Studio for a while?
Alright, next time you login, the issue should be gone.