Cheryl

!Cheryl Tunt

Lead capture and appointment scheduling widget

Setup

Ensure you are using node v12.

Install dependencies

$ npm install

Development

Start development server and watch for changes

$ npm start

For examples to use in development, use http://localhost:8080/examples/. There are three examples:
* http://localhost:8080/examples/appointment.html - Appointment scheduler widget 1.0 embedded in an iframe.
* http://localhost:8080/examples/lead-capture.html - Lead Capture widget embedded in an iframe.
* http://localhost:8080/examples/widget-wrapper.html - Renders both 1.0 widgets directly as part of a React app.
* http://localhost:8080/examples/new-appointment-scheduler.html - Appointment Scheduler 2.0 (deprecated, we've fully switched to the updated multi-screen version)
* http://localhost:8080/examples/updated-appointment-scheduler.html - Multi-screen appointment scheduler 2.0

If you want to use a specific API key or group ID, update the config code in each example.

$3

By default the examples assume that you have chuck (our main application) running locally on http://localhost:8000 -- and will attempt to use the API running there.

In order to get the cheryl dev server to talk to the chuck dev server, you must set CORS_ORIGIN_ALLOW_ALL = True in chuck/settings_local.py

$3

If you don't have chuck running locally, you can configure the widgets to use the production API. Run npm start with the NESTIO_API_DOMAIN environment variable set to https://nestiolistings.com:

NESTIO_API_DOMAIN='https://nestiolistings.com' npm start

Builds

We currently bundle Cheryl into 3 seperate builds:

$3

This build uses the iframe-widget.js and integration.js entry points and is intended to be deployed to a CDN. End users then load the integration.js script on their own website through a script tag. The integration script tag adds a NestioLeadCapture global javascript object which the end user invokes with configuration parameters. The integration script then creates an iframe with the configuration parameters passed in via a query string.

$3

This build uses the babou.js entry point and is intended for use with the Babou V2 widget and to be loaded from a CDN. Instead of loading the widget in an iframe, it directly inserts it into the document. Configuration parameters are passed to the widget using data attributes on an element with the id nestio-lead-capture-script (in practice, the actual script tag loading the widget).

$3

This build uses index.js entry point and is intended to be distributed through NPM for use within bundled project. It exports the components directly as React components so they can be used within a React application. Configuration parameters are passed directly as props.

Configuration Params

These are the configuration parameters required for the widget to work. Depending on which build you're using, they will be passed in differently.

#### Required

__key : 32 char uuid4 hash__ __[required]__

> A private Nestio API key
>
>d1642beb0ec944a6a4b001a0f8cf84b5

__group : Integer__ __[required]__

> The user group ID that appointments and/or leads will be assigned to.
>
>1

__type : String __ __[required]__

> The type of widget to initialize.
>
> __Lead Capture__
>
> Enables just Lead Capturing
>
> lead_capture
>
> __Appointments__
>
> Enables Lead Capture & Appointment Booking
>
>lead_capture_appointment

#### Optional

__color : 6 char hex color String__ __[optional]__

> A custom color to apply to primary elements (buttons, links, hover states, etc). Custom color used as background will always use white as text color, so keep in mind when working with lighter colors.
>
>5AC7CF

__location : String__ __[optional]__

> A custom location (such as a Building or specific Unit) to apply to either lead capture or appointment booking. Any location passed is saved on the client and/or appointment, and is used on confirmation screens and emails.
>
>60 Water

__submitLabel : String__ __[optional]__

> The text displayed on the submit button on the client information form.
>
>Book a tour

__unit : Integer__ __[optional]__

> The ID of a unit. This unit will added as Client Listing on the Client created by the widget.

__buttonTextColor : String__ __[optional]__

> Used to change the color of the text on the submit button of the widget. This should be 6 digit hex code.
>
>000000

__textColor : String__ __[optional]__

> Used to change the color of the headers for each field on the widget, First Name, Last Name, etc. This should be 6 digit hex code.
>
>00FFFF

__disable_pym : Boolean__ __[optional]__ [dev only]
> for use with iframe widget only

> A development-only flag to use to disable pym. A forked version of pym.js is being used to resize a parent iframe in production, but creates an error when a parent pym is not listening. Set to true when developing directly in the browser.
>
>disable_pym=true

Using Cheryl on your website

$3

``


`

$3

Then render it within your compoenent
`
import { WidgetWrapper } from 'cheryl';

class MyComponent extends Component {
render() {
return (
apiKey='exampleKey'
groupId={6}
widgetType='lead_capture'
customColor='#5AC7CF'
initialValues={{
people: [
{
first_name: 'Jeff',
email: 'myname@jeff.com'
}
],
price_floor: 900,
price_ceiling: 4000,
notes: 'example notes'
}}
appointmentLocation='60 Water'
/>
);
}
}
`

How to Release a new version

Cheryl is distributed both through a CDN and through NPM. New versions should be released to both.

$3

- Update version in package.json, commit, and push

- Create a new release in github

- Tag: new version number
- Name: new version number
- Description: Reference all PRs that are in the release

!Release form

- Release a new version to cheryl

npm publish

- Bump the version in any corresponding package.json where cheryl is a dependency

$3

Run

npm run deploy:production

This will update the files available at: https://integrations.nestio.com/contact-widget/v1/
Note that due to caching on the CDN it may take up to 2 minutes to update.

Testing

Run Tests

npm test

Run tests in watch mode:

npm test -- --watch

Run tests with coverage:

npm test -- --coverage

Run tests in watch mode with coverage:

npm test -- --watch --coverage

Run linting

npm run lint

Staging

In order to test v2 widget on staging, you will need to do the following:

* Increment the Cheryl version, using a format like 1.1.11-beta.0, then commit and push the changes.
* Create a pre-release on GitHub.
* Publish a beta version of Cheryl using the command
npm publish --tag beta

* Deploy chuck to a staging link with the updated cheryl version in archer
* Generate an AppointmentSchedulerLink either through the Chuck staging shell or in Messenger and get appointment link prepending appropriate staging url (e.g chuck-pr.nestiostaging.com/appointments/scheduler/).

To test v1 widget on staging, you should perform these steps:

* Update api.js STAGING_DOMAIN to a chuck staging webhook url you want to use (i.e. https://webhooks-chuck-pr123.nestiostaging.com)
* Run staging bundle deploy: npm run deploy:staging;
* Update html file s3://demo.nestiolistings.com/appointment-scheduling-widget/index.html`
to use staging bundle URL: https://integrations.nestio.com/staging-contact-widget/v1/integration.js
* The staged widget will be available on S3 Static hosted website.
When testing is finished, restore widget URL back to prod value https://integrations.nestio.com/contact-widget/v1/integration.js