@predictivehire/phchatbot

Information

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

Usage

• Preparation
• use React
• use Vue(SPA mode)
• 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

param	desc
env	enum(local, qa, sandbox, product) For third-party developers, qa or sandbox will be good for development, and use product for online environments, different value of env will be call the apis with different domain
appId	string, used to retrieve cross-domain whitelist. Pls contact PredictiveHire for more information(https://www.predictivehire.com/)
region	string, PredictiveHire will provide API endpoint with different regions for different customers. Pls contact PredictiveHire for more information(https://www.predictivehire.com/)
assessmentId	This one is generate by PredictiveHire. Pls contact PredictiveHire for more information(https://www.predictivehire.com/)

API

API	definition	desc
attachTo	({ selector, index }: { selector: string; index?: number; }) => void	This selector must be a valid CSS selector string. the default value of index is 0, which means when multiple qualified doms are matched, the index element in the domList should be selected
addCallbackHandler	(callbacks: PHChatBotCallback): => void	Developers can add the event callback they want. The callBack functions will be called in corresponding stage. You can check the PHChatBotCallback below
setTheme	({ theme }: { theme: Theme; }) => void	You can use this api to customized theme color, the complete data structure is as follows

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;
}