GithubHelp home page GithubHelp logo

isabella232 / happychat-client Goto Github PK

View Code? Open in Web Editor NEW

This project forked from automattic/happychat-client

0.0 0.0 0.0 5.93 MB

Happychat customer client code

JavaScript 81.29% HTML 3.26% PHP 1.79% SCSS 13.67%

happychat-client's Introduction

Happychat client

A JavaScript library to embed customer-facing Happychat in any host.

How to use it

Take the JavaScript bundle at targets/standalone/happychat.js and embed it within your project. It'd expose the Happychat global variable:

Happychat.open({
	nodeId: '<HTML node ID where the UI will be rendered>',
});

This code will render a contact form under the HTML node provided, and will let you open a chat session if there is some operator available in Happychat server.

Note that:

  • the host needs to register a WordPress.com OAuth application so it's whitelisted to make requests to the WordPress.com REST API (OAuth docs).
  • the library needs to be passed a valid WordPress.com user accessToken to authenticate the user in Happychat (docs/AUTH.md).

Targets

Three integration targets are implemented in this repository:

  • npm: Happychat embeddedable npm package that exposes the api.
  • Standalone: Happychat embeddedable library that exposes the Happychat API through browser's window. Also has a bare HTML page that can be used for development.
  • WordPress: Happychat exposed as a shortcode in a WordPress environment.

See targets/README.md for more info.

Development environment

Execute:

npm install
npm start

and visit localhost:9000. The first time, you'll be redirected to the WordPress.com token approval screen. By default, it will connect to Happychat staging server, so make sure there is an available operator there.

HACKING.md contains some info that may be useful to navigate the codebase.

Demo

If you want to just take a look at what the library can do, a demo is available at https://automattic.github.io/happychat-client

The code lives in the gh-pages branch. To update the demo:

  • modify the oauth_client_id in targets/standalone/config/index.js to 56134
  • build the standalone target: npm run targets:standalone
  • copy the files in targets/standalone/public to the gh-pages branch
  • commit and push to see the changes live

Testing locally

See https://fieldguide.automattic.com/woocommerce-com-developer-documentation/happychat-on-woocommerce-com/

happychat-client's People

Contributors

bcotrim avatar beaucollins avatar bgrgicak avatar dan-q avatar dwainm avatar evilluendas avatar haszari avatar klimeryk avatar mattwondra avatar mhsdef avatar nosolosw avatar oandregal avatar sirreal avatar undemian avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.