Frameless With Chat Pod

Setting up a frameless output is described in the RH2020 Frameless Output topic. This topic describes how to add a chat pod to a frameless output.

Prerequisites

1. A Dialogflow account. See https://cloud.google.com/pricing. At the time of writing you get US$300 credit to start you off.
2. A project set up in Adobe RoboHelp 2020 with at least Update 1 applied.
3. Some topics that will allow you to create a simple frameless output with a small TOC. 
4. Some microcontent such as that set up in the project in Microcontent > pod_q_and_a.
5. Add the pod_q_and_a microcontent to the TOC, in Properties make sure Hide in Output is selected.
6. For the purposes of this tutorial, the structure shown below. 
   
   
7. A web server that you can publish to. If you don't have a web server, there are various ways you can install one locally such as NodeJS,Python, XAMPP, and many more. You may need assistance from your developers. 

Create a Chatbot Output

This is the first step as the files created are needed in the frameless output. Edit the preset and generate a chatbot output.

General Settings Show me the screenShow me the screen	Currently the only chatbot engine supported is Google Dialogflow. Enter an output path.
Content Settings Show me the screen.Show me the screen.	Select the Microcontent Group. Leave all other field in this simple example.
Dialogflow Settings Show me the screenShow me the screen	You get your JSON file from your Dialogflow account. The link takes you to the Dialogflow site.
Client Settings Show me the screenShow me the screen	These fields populate the chat pod supplied with RoboHelp.  The Embed Code will be needed in the topics or a master page in your frameless output. That will be explained later. You can use third party pods if preferred but how to set that up is not covered here.

Add the Chatbot Output to Your Project

1. Use File Explorer to go to the chatbot output folder.
2. Select the cbicons folder and the chatbot.css and chatbot.js files.
   
3. Paste the files and folders into your project. It should look something like this.
   

Add the Script

An example of the script you will need is in the Embed Code field of the Chatbot preset. You will need to amend it to reflect the structure of your project.

You can have the chat pod on the home page only with or without it being in topics or you can have it in topics only.

In All Topics

If you want the chat pod to appear in all topics, the easiest way is to use a master page. You can either create a master page or add the script to one you already use.

Using the structure described in this topic, you will need to amend the script as below.

In Specific Topics

If you only want the chat pod to appear in specific topics, you add the script to the head section of those topics. Again you must amend the path to reflect the location of the topic.

On the Home Page

The script needs to be added after you have generated the frameless output.

Generate and Publish the Frameless Output

1. Next you generate the frameless output.
2. Nothing special here other than for the purposes of this tutorial, generate to the Outputs > Microcontent folder shown in Prerequisites above.
3. When the frameless output has been generated, use File Explorer and go to the chatbot output folder. Copy the mcassets folder.
   
4. Go to the Frameless output folder and paste the mcassets folder
5. This step is only required if you want the chat pod on the home page, whether or not it will also be in any topics. Locate the start page of your output (not the default topic), usually index.htm, and open it in a text editor, then add the script as described in the section above. Amend the path as required.
6. Publish to your web server.