Overview
Plug JS is the easiest way to collect, manage, and consume real-time data to fuel personalized experiences. A single line of code gives you a fully-featured devkit for building natively personalized applications.
- Zero configuration. No setup steps required.
- No backend necessary. Deliver personalized experiences from static sites.
- Fast queries. Double-digit millisecond latency for real-time evaluations.
- Fully extensible API. Easily add and share new features via plugins.
- Type-Safe. Typescript typings included.
- Playground integration One-click to connect, no configuration needed.
Installation
There are two ways to install the Croct SDK:
NPM
The recommended way to install the SDK is via NPM. It pairs nicely with module bundlers such as Webpack or Browserify and includes Typescript typings.
In most cases, it should be as simple as running the following in your project:
npm install @croct/plugThen, call croct.plug passing the App ID to initialize the SDK:
import croct from '@croct/plug';
croct.plug({appId: '<APP_ID>'});Script Tag
To install the SDK as a script tag, add the following line to the <head> tag of your site on any pages you plan to use the SDK to personalize or track events:
<script src="https://cdn.croct.io/js/v1/lib/plug.js?appId=<APP_ID>"></script>
<script>croct.plug();</script>You should replace the <APP_ID> placeholder with the respective App ID. For more information about the available options, see croct.plug.
Getting Started
🏖️ Just for your convenience
We will use CodePen throughout the tutorial to let you play with the examples right in your browser.
Follow the steps below to connect the playground with CodePen:
- Open the playground
- Click on the "Don't have an API Key?" link to proceed in sandbox mode
- Enter the URL
https://codepen.io/pen - Click on "Let's play!"
💡️ Hint
You will typically use an API key to connect to your development, staging, or production environments in real cases, but you can also use a local URL, such ashttps://localhost/myapp.
Now, try evaluating the expression below:
user is returning
After clicking on the Evaluate button, you will see the result at the bottom of the page, which is either true or
false depending on whether it is the first time playing with this example.
Let's now implement our first personalization feature. Click on the three-dots icon on the editor's top right corner and select "Open in CodePen". Then, copy the code below and paste into the HTML panel:
<button onclick="hey()">👋 Say hey</button>
<script>
function welcome() {
if (confirm('Welcome! Do you want to take a look at our quick start guide?')) {
window.open('https://croct.link/plug-js/quick-start');
}
}
function welcomeBack() {
if (confirm('Welcome back! How about joining us on Slack this time?')) {
window.open('https://croct.link/community');
}
}
function hey() {
croct.evaluate('user is returning')
.then(returning => returning ? welcomeBack() : welcome());
}
</script>Try clicking "
Documentation
The following references provide guidance to help you get started, integrate, and troubleshoot problems:
- Quick Start Guide
- Plug Reference
- Tracker Reference
- Evaluator Reference
- Event Reference
- Patch Reference
- User Reference
- Session Reference
- Testing
- Troubleshooting
If you are new to the Croct platform, the quick start guide is a good starting point for application developers to begin learning the essential concepts.
Support
If the troubleshooting section does not cover your problem, don't worry, there are alternative ways to get help from the Croct community.
Stack Overflow
Someone else from the community may have already asked a similar question or may be able to help with your problem.
The Croct team will also monitor posts with the "croct" tag. If there aren't any existing questions that help, please ask a new one.
GitHub
If you have what looks like a bug, or you would like to make a feature request, please open a new issue on GitHub.
Before you file an issue, a good practice is to search for issues to see whether others have the same or similar problems. If you are unable to find an open issue addressing the problem, then feel free to open a new one.
Slack Channel
Many people from the Croct community hang out on the Croct Slack Group. Feel free to join us and start a conversation.
Contributing
Contributions to the package are always welcome!
- Report any bugs or issues on the issue tracker.
- For major changes, please open an issue first to discuss what you would like to change.
- Please make sure to update tests as appropriate.
Testing
Before running the test suites, the development dependencies must be installed:
npm installThen, to run all tests:
npm testLicense
This project is released under the MIT License.