RH2020 Chatbot Preset

Report · Aug 06, 2020

Hi

Is there a way to change the height, logo, background color of the chat window, etc?

The Chatbot output only gives three options - General, Content and Dialoglow.

Report · Aug 07, 2020

I believe that is down to the chatbot engine you use.

Help others by clicking Correct Answer if the question is answered. Found the answer elsewhere? Share it here. "Upvote" is for useful posts.

Report · Aug 07, 2020

I don't think it needs to be done in Dialogflow.

Once the chatbot preset is generated, RH displays as folder called Chatbot Styles. But this is viewable only once the output is generated. This folder contains chatbot.css file. Editing the output css file is not the easy way out because everytime I generate an ouput I will have to keep editing the css file too.

Also, is it possible to get the Chatbot in the Topic pages too?

Report · Aug 07, 2020

I have just found out a bit more. I'll reply more fully later but in short you would need to find chatbot.css in the output and manually edit that.

Help others by clicking Correct Answer if the question is answered. Found the answer elsewhere? Share it here. "Upvote" is for useful posts.

Report · Aug 07, 2020

The way chatbot works is you create the content using Microcontent. When you generate a Chatbot output, the content is pushed to the Dialogflow server that RoboHelp is configured to use.. From there you retrieve it using an agent such as Alexa, Siri, Facebook Messenger or the sample that RoboHelp provides.

The code for the sample agent is in the Dialogflow screen. It will be moved from there to another screen as that is misleading, the code there is nothing to do with Dialogflow. For your purposes, ignore the Dialogflow options but don't remove the code.

Any customisation has to be done in the files in the Chatbot output.

I will publish a link later to the webinar that Adobe produced about this area.

Help others by clicking Correct Answer if the question is answered. Found the answer elsewhere? Share it here. "Upvote" is for useful posts.

Report · Aug 07, 2020

https://microcontent-authoring-in-robohelp.meetus.adobeevents.com/

Help others by clicking Correct Answer if the question is answered. Found the answer elsewhere? Share it here. "Upvote" is for useful posts.

Report · Aug 07, 2020

I had attended the webinar by Vivek.

I tried editing the chatbot.css but for some reason the changes are not reflected in the output. Any sepcific steps that i need to follow?
Also, in the webinar, Vivek says that we can copy-paste the Dialogflow code into a Master Page. Do we need to paste the code in the HTML screen?
Is there a way to get the chatbot in the Topic page?

Report · Aug 08, 2020

Hi Siju,

1. Direct edits to the chatbot.css file should have done the job. CSS file's can be verfied by opening your webpage with chatbot and the latest chatbot css file and inspecting it. We can take a look at the css file you edited, and check whether the styles are conflicting with other styles on the particular page on which chatbot is rendered.

2. chatbot generated from RH can be embedded into any HTML page, not just frameless but any HTML page, it could be a topic or a homepage from frameless or responsive html5 output or any third party HTML page. Simply copy the chatbot preset's embed code in the <head> of the HTML file and copy the chatbot assets and assets folder generated in the chatbot preset in the same folder as the HTML file.

3. You can try adding the embed code in a masterpage and apply it to topics. That way the code will get applied to all the topics which have the masterpage added. This is what Vivek was talking about in the demo.

Consider the embed code as just some normal html file references, it is just a CSS and JS file which needs to be added in your HTML page. You can copy copy the assets, chatbot assets, and chatbot JS from a generated chatbot preset in your project and use it like any css or js file.

Report · Aug 08, 2020

You can share the changed chatbot css or inspect the chatbot on the webpage yourself to see for any conflicts with exisiting styles.

Report · Aug 08, 2020

I have reached out to someone who can help you further. It's all new to me too.

Help others by clicking Correct Answer if the question is answered. Found the answer elsewhere? Share it here. "Upvote" is for useful posts.

Report · Aug 09, 2020

Thanks Peter for connecting Sudhanshu.

Can we edit the chatbot.css from RH or is it only possible from the backend?

Report · Aug 10, 2020

Right now a "skin editor" similar to a frameless/resp html5 for a chatbot is not available in RH. So you will have to edit it like any other CSS file only. However, you can copy the CSS file in one of the RH projects' assets/CSS folder and edit it in RH using the CSS editor.

Report · Aug 10, 2020

Hi, Siju.

Chatbots are quite new and they are a bit more complicated because they involve a third-party provider. In this case it's Google's DialogFlow. To test it out, I created a trial account. Then, using information kindly passed along to me by Sudhanshu a week or two ago, I was able to edit the chatbot.css manually in the Rh editor. It's not documented, but the simple .css text is fairly intuitive to figure out even if you (like me) are not a "coder". You can see the results on my test site.

http://showmethedemo.com/Compass_Travel/

As you will see, I have changed the colors and added a logo replacement among other things. It is just a very simple Chatbot for a "fictional" travel company purely for demonstration. To try it out, ask these questions:

What are the best months to travel to Oregon?
Are there lighthouses in Oregon?
Can you go camping in Oregon?
What is the coast like in Oregon?
Are there waterfalls in Oregon?

It's not very sophisticated, but you'll get the idea.

I will be producing a tutorial to explain how I did this. If you will send me a private message, I'll keep you posted on when this tutorial will be available.

Thanks

John Daigle

Adobe Certified RoboHelp and Captivate Instructor

1395 NE Newport Heights Dr.

Newport, OR 97365

John Daigle
Adobe Certified RoboHelp and Captivate Instructor
Newport, Oregon

Report · Aug 10, 2020

I did edit the chatbot.css using Notepad++. But the changes are not rendered in the output?

To start with, i tried to reduce the height of the chat container. This is what i did:

In the Chatbot.css, under #rh_chatbot_container, changed height: 580px to 480px. But the height did not reduce in the output.

Anything that I am missing.

Report · Aug 10, 2020

Can you share the hosted output with me like John has shared his with you? Or are you hosting it on localhost using http-server?

Report · Aug 10, 2020

I am using a local http server. If you could share your email id, I will share the project.

Report · Aug 11, 2020

I have figured out the issue. It was due to browser caching. I cleared the cache and now changes made to the Chatbot.css file are rendering as expected in the ouput.

Adobe Community

RH2020 Chatbot Preset

1 Correct answer