Skip to main content
S
Siju George
Inspiring
August 7, 2020
Answered

RH2020 Chatbot Preset

  • August 7, 2020
  • 12 replies
  • 964 views

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.  

 

This topic has been closed for replies.
Correct answer Siju George

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.

12 replies

S
Siju GeorgeAuthorCorrect answer
Inspiring
August 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.

S
Siju GeorgeAuthor
Inspiring
August 10, 2020

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

S
Siju GeorgeAuthor
Inspiring
August 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.

S
Adobe Employee
smonga1996
Adobe Employee
August 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?

johndaigle
johndaigle
Legend
August 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:

  1. What are the best months to travel to Oregon?
  2. Are there lighthouses in Oregon?
  3. Can you go camping in Oregon?
  4. What is the coast like in Oregon?
  5. 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 DaigleAdobe Certified RoboHelp and Captivate InstructorNewport, Oregon
    S
    Siju GeorgeAuthor
    Inspiring
    August 10, 2020

    Thanks Peter for connecting Sudhanshu.

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

    S
    Adobe Employee
    smonga1996
    Adobe Employee
    August 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. 

    Peter Grainge
    Community Expert
    Peter GraingeCommunity Expert
    Community Expert
    August 8, 2020

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

     

    Use the menu (bottom right) to mark the Best Answer or Highlight particularly useful replies. Found the answer elsewhere? Share it here.
    S
    Siju GeorgeAuthor
    Inspiring
    August 7, 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?

     

    S
    Adobe Employee
    Sudhanshu Monga
    Adobe Employee
    August 9, 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. 

    S
    Adobe Employee
    Sudhanshu Monga
    Adobe Employee
    August 9, 2020

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

    Peter Grainge
    Community Expert
    Peter GraingeCommunity Expert
    Community Expert
    August 7, 2020

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

     

    Use the menu (bottom right) to mark the Best Answer or Highlight particularly useful replies. Found the answer elsewhere? Share it here.
    Peter Grainge
    Community Expert
    Peter GraingeCommunity Expert
    Community Expert
    August 7, 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.

     

    Use the menu (bottom right) to mark the Best Answer or Highlight particularly useful replies. Found the answer elsewhere? Share it here.
    Peter Grainge
    Community Expert
    Peter GraingeCommunity Expert
    Community Expert
    August 7, 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.

     

    Use the menu (bottom right) to mark the Best Answer or Highlight particularly useful replies. Found the answer elsewhere? Share it here.
    Show more replies
    Terms & ConditionsAccessibility statement
    Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices