Simplicity Embed™ Quick Start

To get familiar with Simplicity Embed™ we recommend cloning or downloading the example project and studying the code in there. To view detailed information please refer to the Simplicity Embed™ Reference Manual.

All projects will require you to obtain at minimum a trial developer key. You can request a free key without entering any credit card information here or if you are ready to purchase you can go here.

git clone https://github.com/mfoitzik/simplicity-embed-widget-example-vanilljs.git

Need help? Contact us with any questions, suggestions, problems or anything else and we'll try to help you get rolling with Simplicity Embed™.

To begin, pick one of the example projects below:

• Vanilla Javascript Example Project
• Angular Standalone Example Project
• Angular Module Example Project
• React Example Project
• Vue Example Project

Once you load one of the example projects, the best way to learn how to implement Simplicity Embed™ for your particular application is to read through the reference manual and check out the architecture section, configuration section and the Vanilla JavaScript section which reviews the details of communications between the host page, the Simplicity Embed™ component and your hosted app/widget.

Vanilla JavaScript Project

Make sure you have the example widget downloaded and running (referenced at the top of this page). Make note of the domain and port that the widget is running on. The sample widget code project also hosts the setup files that the Simplicity Embed™ component references in its setup attribute. Make sure you followed the steps at the top of the page for making changes in the config.json and config2.json files in the sample widget code project.

Clone the project:

git clone https://github.com/mfoitzik/simplicity-embed-vanillajs-example.git

• Open the project in Visual Studio Code (or your favorite IDE)
• Open the index.html file in your editor and in the Simplicity Embed™ component (<simplicity-embed>) change the URL/port referenced in the setup attribute to the URL/port you recorded when you started the sample widget project above. <simplicity-embed setup="http://localhost:5504/config.json"
• While still editing the index.html file go down to the script section at the bottom of the page and change the url/port referenced in the changeConfigBtn.addEventListener section. seElement.setup = "http://localhost:5504/config2.json?cb=". Save the file.
• In the sample widget project open the config/config_helloworld.js file and replace the value for the devKey property with the trial key you received (or dev key that you purchased)

Open the index.html file with your dev server (in Visual Studio Code I use Live Server). You should see the widget running in a generic page like this:

Study the widget code to see how it sends configuration changes to the Simplicity Embed™ web component when it opens the rating input. There are 4 buttons in the sample host page (Open, Close, Send Command, Change Config) that demonstrate how the host page can send commands to your widget throught the Simplicity Embed™ web comonent as well as to the component itself by changing the setup attribute value. Read through the Simplicity Embed™ reference manual for further details.

Angular (Standalone) Project

Make sure you have the example widget downloaded and running (referenced at the top of this page). Make note of the domain and port that the widget is running on. The sample widget code project also hosts the setup files that the Simplicity Embed™ component references in its setup attribute. Make sure you followed the steps at the top of the page for making changes in the config.json and config2.json files in the sample widget code project.

You will need to have the Angular client installed:

npm install -g @angular/cli

Clone the project:

git clone https://github.com/mfoitzik/simplicity-embed-angular-standalone-example.git

In the /src/app/app.component.ts file edit the seSetup variable and the url referemced in the changeConfig() method and replace the url/port with what you recorded when you started the sample widget project running.

npm install
ng serve -open

When the project is running you should see the widget running in a generic page like this:

Study the widget code to see how it sends configuration changes to the Simplicity Embed™ web component when it opens the rating input. There are 4 buttons in the sample host page (Open, Close, Send Command, Change Config) that demonstrate how the host page can send commands to your widget throught the Simplicity Embed™ web comonent as well as to the component itself by changing the setup attribute value. Read through the Simplicity Embed™ reference manual for further details.

Angular (Module) Project

Make sure you have the example widget downloaded and running (referenced at the top of this page). Make note of the domain and port that the widget is running on. The sample widget code project also hosts the setup files that the Simplicity Embed™ component references in its setup attribute. Make sure you followed the steps at the top of the page for making changes in the config.json and config2.json files in the sample widget code project.

You will need to have the Angular client installed:

npm install -g @angular/cli

Clone the project:

git clone https://github.com/mfoitzik/simplicity-embed-angular-module-example.git

In the /src/app/app.component.ts file edit the seSetup variable and the url referemced in the changeConfig() method and replace the url/port with what you recorded when you started the sample widget project running.

npm install
ng serve -open

When the project is running you should see the widget running in a generic page like this:

Study the widget code to see how it sends configuration changes to the Simplicity Embed™ web component when it opens the rating input. There are 4 buttons in the sample host page (Open, Close, Send Command, Change Config) that demonstrate how the host page can send commands to your widget throught the Simplicity Embed™ web comonent as well as to the component itself by changing the setup attribute value. Read through the Simplicity Embed™ reference manual for further details.

React Project

Make sure you have the example widget downloaded and running (referenced at the top of this page). Make note of the domain and port that the widget is running on. The sample widget code project also hosts the setup files that the Simplicity Embed™ component references in its setup attribute. Make sure you followed the steps at the top of the page for making changes in the config.json and config2.json files in the sample widget code project.

Clone the project:

git clone https://github.com/mfoitzik/simplicity-embed-react-example.git

• Open the project in Visual Studio Code (or your favorite IDE)
• Open the /src/App.tsx file. Edit the line const [seSetup, setSeSetup] = useState("http://localhost:5500/config.json"); and the line setSeSetup("http://localhost:5500/config2.json"); and change the url/port to that which you recorded when starting up the sample widget.

npm install
npm run dev

When the project is running you should see the widget running in a generic page like this:

Study the widget code to see how it sends configuration changes to the Simplicity Embed™ web component when it opens the rating input. There are 4 buttons in the sample host page (Open, Close, Send Command, Change Config) that demonstrate how the host page can send commands to your widget throught the Simplicity Embed™ web comonent as well as to the component itself by changing the setup attribute value. Read through the Simplicity Embed™ reference manual for further details.

Vue Project

Make sure you have the example widget downloaded and running (referenced at the top of this page). Make note of the domain and port that the widget is running on. The sample widget code project also hosts the setup files that the Simplicity Embed™ component references in its setup attribute. Make sure you followed the steps at the top of the page for making changes in the config.json and config2.json files in the sample widget code project.

Clone the project:

git clone https://github.com/mfoitzik/simplicity-embed-vuejs-example.git

• Open the project in Visual Studio Code (or your favorite IDE)
• In the src/App.vue file edit const seSetup = ref('http://localhost:5500/config.json') and seSetup.value = "http://localhost:5500/config2.json"; and change the url/port to the one you recorded when starting up the sample widget app above.

npm install
npm run dev

When the project is running you should see the widget running in a generic page like this:

Study the widget code to see how it sends configuration changes to the Simplicity Embed™ web component when it opens the rating input. There are 4 buttons in the sample host page (Open, Close, Send Command, Change Config) that demonstrate how the host page can send commands to your widget throught the Simplicity Embed™ web comonent as well as to the component itself by changing the setup attribute value. Read through the Simplicity Embed™ reference manual for further details.