This package has been deprecated

Author message:

We moved all Tripetto packages to the '@tripetto' organization. Please use 'npm i @tripetto/runner-chat' instead. Full documentation available at: https://tripetto.com/sdk/docs/

tripetto-runner-chat
TypeScript icon, indicating that this package has built-in type declarations

4.1.7 • Public • Published

Tripetto

Tripetto is a full-fledged form kit. Rapidly build and run smart flowing forms and surveys. Drop the kit in your codebase and use all of it or just the parts you need. The visual builder is for form building, and the runners are for running those forms in different UI variants. It is entirely extendible and customizable. Anyone can build their own building blocks (e.g., question types) or runner UI's.

Chat runner

Version License Downloads Pipeline status Follow us on Twitter

Purpose

This package is a chat UI for running Tripetto forms and surveys. In this UI the questions and elements (so called blocks) are displayed like a chat message. That allows you to build highly conversational interactions with your users.

Try the demo

Get started

There are multiple options how you can use this runner. From plain old HTML to React or using imports.

Option A: Embed in HTML using CDN

<script src="https://unpkg.com/tripetto-runner-foundation"></script>
<script src="https://unpkg.com/tripetto-runner-chat"></script>
<script>
TripettoChat.run({
    definition: /** Supply a form definition here. */,
    onSubmit: function(instance) {
      // Implement your response handler here.

      // For this example we output all exportable fields to the browser console
      console.dir(TripettoRunner.Export.exportables(instance));

      // Or output the data in CSV-format
      console.dir(TripettoRunner.Export.CSV(instance));
    }
});
</script>

Try demo on CodePen

Option B: Using React

  1. Install the required packages from npm:
$ npm install tripetto-runner-foundation tripetto-runner-chat react react-dom
  1. Use the React component:
import ReactDOM from "react-dom";
import { ChatRunner } from "tripetto-runner-chat";
import { Export } from "tripetto-runner-foundation";

ReactDOM.render(
  <ChatRunner
    definition={/** Supply a form definition here. */}
    onSubmit={instance => {
      // Implement your response handler here.

      // For this example we output all exportable fields to the browser console
      console.dir(Export.exportables(instance));

      // Or output the data in CSV-format
      console.dir(Export.CSV(instance));
    }}
    />,
  document.getElementById("your-element")
);

Option C: Import from npm

  1. Install the required packages from npm:
$ npm install tripetto-runner-foundation tripetto-runner-chat react react-dom
  1. Import the runner:
import { run } from "tripetto-runner-chat";
import { Export } from "tripetto-runner-foundation";

run({
    definition: /** Supply a form definition here. */,
    onSubmit: instance => {
      // Implement your response handler here.

      // For this example we output all exportable fields to the browser console
      console.dir(Export.exportables(instance));

      // Or output the data in CSV-format
      console.dir(Export.CSV(instance));
    }
});

Documentation

The complete Tripetto documentation can be found at docs.tripetto.com.

Support

Run into issues or bugs? Report them here and we'll look into them.

For general support contact us at support@tripetto.com. We're more than happy to assist you.

License

License

You are allowed to use this package without a license (and free of charge) as long as you keep the Tripetto branding enabled (which is the default mode). When you want to remove the branding, you need a (paid) license to do so.

Contributors

About us

If you want to learn more about Tripetto or contribute in any way, visit us at Tripetto.com.

Dependents (0)

Package Sidebar

Install

npm i tripetto-runner-chat

Weekly Downloads

88

Version

4.1.7

License

CC-BY-NC-ND-4.0

Unpacked Size

7.9 MB

Total Files

606

Last publish

Collaborators

  • markvandenbrink