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.
I believe that is down to the chatbot engine you use.
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?
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.
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.
I had attended the webinar by Vivek.
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.
You can share the changed chatbot css or inspect the chatbot on the webpage yourself to see for any conflicts with exisiting styles.
I have reached out to someone who can help you further. It's all new to me too.
Thanks Peter for connecting Sudhanshu.
Can we edit the chatbot.css from RH or is it only possible from the backend?
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.
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.
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:
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.
Adobe Certified RoboHelp and Captivate Instructor
1395 NE Newport Heights Dr.
Newport, OR 97365
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.
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?
I am using a local http server. If you could share your email id, I will share the project.
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.