@predictivehire/phchatbot v2.18.0

Information

PredictiveHire AI chatbot. You can contact PredictiveHire for more information. https://www.predictivehire.com

Usage

0. Preparation
1. use React
2. use Vue(SPA mode)
3. use Vue(SSR mode)

0. prepare

In order to initiate the request correctly when developing locally, you need to add the host of app.localhost.com

Note: If you use vue-cli to create a new project, you might meet a Invalid Host/Origin header error when you open the page with app.localhost.com. This is because the new version of webpack-dev-server adds security verification. The hostname is checked by default. If the hostname is not in the configuration, the access will be interrupted.

Solution: Create the file vue.config.js in the root directory, and then fill in the following content:

module.exports = {
  devServer: {
    disableHostCheck: true,
  }
}

1. use React

create TestPage component

|-- TestPage

|---- TestPage.tsx

|---- style.css

// ----------------------------------- TestPage.tsx ----------------------------
import "./style.css"

import * as React from "react"
import { PHChatBot } from "@predictivehire/phchatbot"

export const TestPage = () => {
  // for assessmentId you can contact PredictiveHire for more information, so do appId and region
  const appId = "appId"
  const assessmentId = "assessmentId"
  const region = "region" // need to confirm with PredictiveHire
  const env = "qa" // this one is used to decide which domain name to use to initiate an api request

  const chatbotATS = new PHChatBot({
    appId: appId,
    region: region,
    env: env,
    assessmentId: assessmentId
  })

  // developers can add the event callback they want
  chatbotATS.addCallbackHandler({
    FI_ASSESSMENT_STARTED: payload => {
      console.info(payload)
    },
    FI_ASSESSMENT_ANSWER_SAVED: payload => {
      console.info(payload)
    },
    FI_ASSESSMENT_ENDED: assessmentId => {
      console.info(assessmentId)
    }
  })
  chatbotATS.setTheme({
    theme: {
      question: {
        backgroundColor: "#ef8200",
        fontColor: "#fff"
      }
    }
  })
  chatbotATS.attachTo({ selector: "#rootATS" })

  return (
    <div className="main">
      <div className="chat-bot-box" id="rootATS" />
    </div>
  )
}

//-------------------------------------- style.css ----------------------------
.main {
  position: relative;
  text-align: center;
  width: 500px;
  height: 90vh;
  margin: 5vh auto;
  background-color: #fff;
}

.chat-bot-box {
  position: relative;
  z-index: 10;
  width: 100%;
  height: 100%;
  margin: 0 auto;
  background-color: #fff;
}

@media screen and (max-width: 980px) {
  .chat-bot-box {
    position: fixed;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    transform: none;
  }
}

2. use Vue(SPA mode)

<template>
  <div class="main">
    <div class="chat-bot-box" id="rootATS" />
  </div>
</template>

<script>
import {PHChatBot} from "@predictivehire/phchatbot"
export default {
  name: 'HelloWorld',
  mounted: () => {
    // for assessmentId you can contact PredictiveHire for more information, so do appId and region
    const appId = "appId"
    const assessmentId = "assessmentId"
    const region = "region" // need to confirm with PredictiveHire
    const env = "qa" // this one is used to decide which domain name to use to initiate an api request

    const chatbotATS = new PHChatBot({
      appId: appId,
      region: region, // need to confirm with PredictiveHire
      env: env, // this one is used to decide which domain name to use to initiate an api request
      assessmentId: assessmentId
    })

    // developers can add the event callback they want
    chatbotATS.addCallbackHandler({
      FI_ASSESSMENT_STARTED: payload => {
        console.info(payload)
      },
      FI_ASSESSMENT_ANSWER_SAVED: payload => {
        console.info(payload)
      },
      FI_ASSESSMENT_ENDED: assessmentId => {
        console.info(assessmentId)
      }
    })
    chatbotATS.setTheme({
      theme: {
        question: {
          backgroundColor: "#ef8200",
          fontColor: "#fff"
        }
      }
    })
    chatbotATS.attachTo({ selector: "#rootATS" })
  }
}
</script>

<style scoped>
.main {
  position: relative;
  text-align: center;
  width: 500px;
  height: 90vh;
  margin: 5vh auto;
  background-color: #fff;
}

.chat-bot-box {
  position: relative;
  z-index: 10;
  width: 100%;
  height: 100%;
  margin: 0 auto;
  background-color: #fff;
}

@media screen and (max-width: 980px) {
  .chat-bot-box {
    position: fixed;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    transform: none;
  }
}
</style>

3. use Vue(SSR mode)

<template>
  <div class="main">
    <div class="chat-bot-box" id="rootATS" />
  </div>
</template>

<script>
let PHChatBot
if (typeof window !== 'undefined') {
  // Ensure that the window object has been defined. Otherwise you will encounter window is not defined error
  PHChatBot = require('@predictivehire/phchatbot')
}
export default {
  name: 'HelloWorld',
  mounted: () => {
    // for assessmentId you can contact PredictiveHire for more information, so do appId and region
    const appId = "appId"
    const assessmentId = "assessmentId"
    const region = "region" // need to confirm with PredictiveHire
    const env = "qa" // this one is used to decide which domain name to use to initiate an api request

    const chatbotATS = new PHChatBot.PHChatBot({
      appId: appId,
      region: region, // need to confirm with PredictiveHire
      env: env, // this one is used to decide which domain name to use to initiate an api request
      assessmentId: assessmentId
    })

    // developers can add the event callback they want
    chatbotATS.addCallbackHandler({
      FI_ASSESSMENT_STARTED: payload => {
        console.info(payload)
      },
      FI_ASSESSMENT_ANSWER_SAVED: payload => {
        console.info(payload)
      },
      FI_ASSESSMENT_ENDED: assessmentId => {
        console.info(assessmentId)
      }
    })
    chatbotATS.setTheme({
      theme: {
        question: {
          backgroundColor: "#ef8200",
          fontColor: "#fff"
        }
      }
    })
    chatbotATS.attachTo({ selector: "#rootATS" })
  }
}
</script>

<style scoped>
.main {
  position: relative;
  text-align: center;
  width: 500px;
  height: 90vh;
  margin: 5vh auto;
  background-color: #fff;
}

.chat-bot-box {
  position: relative;
  z-index: 10;
  width: 100%;
  height: 100%;
  margin: 0 auto;
  background-color: #fff;
}

@media screen and (max-width: 980px) {
  .chat-bot-box {
    position: fixed;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    transform: none;
  }
}
</style>

Params

API

Params Type

Theme

{
  hint: {
    backgroundColor: string
    fontColor: string
  },
  question: {
    backgroundColor: string
    fontColor: string
  },
  response: {
    backgroundColor: string
    fontColor: string
  },
  listItem: {
    backgroundColor: string
    fontColor: string
  },
  selectedItem: {
    backgroundColor: string
    fontColor: string
  },
  button: {
    backgroundColor: string
    fontColor: string
  }
}

PHChatBotCallback

{
  FI_ASSESSMENT_STARTED: (payload: {
    assessmentId
    chatLogs
    branding
  }) => void;
  FI_ASSESSMENT_ANSWER_SAVED: (payload: {
    assessmentId: string
    question: string
    answer: string
    types: string[]
  }) => void;
  FI_ASSESSMENT_ENDED: (payload: { assessmentId: string }) => void;
}