diff --git a/.gitignore b/.gitignore index 3d4e5a1..348d1fc 100644 --- a/.gitignore +++ b/.gitignore @@ -6,4 +6,5 @@ server.js yarn.lock app/ scripts.js -new-language.json \ No newline at end of file +new-language.json +dist/ \ No newline at end of file diff --git a/LICENSE b/LICENSE new file mode 100644 index 0000000..7aae09a --- /dev/null +++ b/LICENSE @@ -0,0 +1,21 @@ +MIT License + +Copyright (c) 2024 Alejandro Vera + +Permission is hereby granted, free of charge, to any person obtaining a copy +of this software and associated documentation files (the "Software"), to deal +in the Software without restriction, including without limitation the rights +to use, copy, modify, merge, publish, distribute, sublicense, and/or sell +copies of the Software, and to permit persons to whom the Software is +furnished to do so, subject to the following conditions: + +The above copyright notice and this permission notice shall be included in all +copies or substantial portions of the Software. + +THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR +IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, +FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE +AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER +LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, +OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE +SOFTWARE. diff --git a/README.md b/README.md index 0c3807b..1c86fb2 100644 --- a/README.md +++ b/README.md @@ -1,82 +1,98 @@ -# JigsawStack Translation Widget - -This guide will help you integrate the Translation Widget into your website. +# Translation Widget +A lightweight, customizable translation widget that can be easily embedded into any website. ## Prerequisites -- A valid public key (obtain from your [JigsawStack dashboard](https://jigsawstack.com)) - -## Installation Steps -### 1. Add the Widget Script -Add the following code to your HTML file, just before the closing `
- - - - - -` tag: +The widget requires React 18 to be loaded in your project. You can include React in one of two ways: +### Option 1: Using CDN (Recommended for simple websites) +Add these scripts to your HTML before loading the widget: ```html - - + + ``` -### 2. Initialize the Widget -Add the initialization code after the widget script: +### Option 2: Using npm (Recommended for React projects) +If you're already using React in your project, you can skip this step. + +## Installation + +1. Download the widget files from the `dist` directory: + - `embed.min.js` + - `embed.css` +2. Add the files to your project: ```html - + + ``` -Replace `YOUR_PUBLIC_KEY_HERE` with your actual public key. +## Usage -### Complete Example -Here's a minimal working example: +The widget will automatically initialize when the script loads. It will appear in the top-right corner of your website. -```html - - -
-
- -
-