@innovastudio/contentbox

ContentBox.js 5.8.6

Documentation:

https://demo.innovastudio.com/docs/ContentBox.pdf

https://demo.innovastudio.com/docs/AI-Assistant.pdf (AI Assistant documentation)

You can choose to run the HTML, PHP or JavaScript project examples:

A. To try the HTML example:

1. Unzip the project files:

   - ContentBox/

2. Open terminal, go to the project directory and install the required server dependencies.
   The example is using Node.js server.

    > cd ContentBox

    > npm install

        Note: To run this command, you need to have NPM installed.
        Download & install NPM from https://nodejs.org/en/download/.

3. Run the server:

    > node server.js

3. Open from your browser:

    http://localhost:8081/example.html 

B. To try the PHP Example, open from your browser:

http://localhost/.../public/example.php

If you're using Visual Studio Code, you can use the PHP Server extension.

C. To try the JavaScript project, install the dependencies and start the project:

    > npm install

    > npm start

A browser window will be opened with the example running.

Note:
    The code for this project is:
        
        src/index.js

    The project is using Node.js server:

        server.js

NOTE:

• To use the AI Assistant:

  1. Obtain the OpenAI API key from https://openai.com.

  2. Update the .env file with your API key.

      OPENAI_API_KEY=YOUR_API_KEY
     

     Alternatively, if you're using PHP, update the api/config.php file with your API key:

      $OPENAI_API_KEY = 'YOUR_API_KEY';
     

• For speech recognition (if dictation is enabled), the browser's built-in speech recognition is used. However, certain browsers may not support this feature. We recommend using Deepgram for browser compatibility and accuracy. Obtain the Deepgram API key from https://deepgram.com and update the .env file with your API key. Then enable the 'speechTranscribeUrl' parameter in the ContentBox initialization (src/index.js).

• To use the AI image generation:

  1. Obtain the API key from https://getimg.ai/tools/api.

  2. Update the .env file with your API key.

      GETIMG_API_KEY=YOUR_API_KEY
     

     Alternatively, if you're using PHP, update the 'api/config.php' file with your API key:

      $GETIMG_API_KEY = 'YOUR_API_KEY';
     

• To try the examples using S3 Storage:

  A. HTML example

    1. Update the .env file with your S3 storage credentials.
  
        AWS_KEY=YOUR_KEY
        AWS_SECRET=YOUR_SECRET
        AWS_BUCKET=BUCKET_NAME
        AWS_URL=http://BUCKET_NAME.s3-website-us-east-1.amazonaws.com 
        AWS_REGION=us-east-1
  
    2. Install the server dependencies:
  
        > npm install
  
    3. Run the server:
  
        > node server-aws.js
  
    4. Open from your browser:
  
        http://localhost:8081/example-s3.html 
  

  B. PHP example

    1. Update the public/api/config.php with your S3 storage credentials.
  
        $AWS_KEY = 'YOUR_KEY';
        $AWS_SECRET = 'YOUR_SECRET';
        $AWS_BUCKET = 'BUCKET_NAME';
        $AWS_URL = 'http://BUCKET_NAME.s3-website-us-east-1.amazonaws.com';
        $AWS_REGION = 'us-east-1';
  
    2. Download the AWS SDK for PHP phar file (aws.phar) from https://github.com/aws/aws-sdk-php/releases 
       and copy it to your project's public/api/ directory.
  
    3. Open from your browser:
  
        http://localhost/.../public/example-s3.php
  

• New Canvas Mode

Canvas mode is a new option for seamless (gridless) block positioning. Simply activate with:

const builder = new ContentBox({
    canvas: true,
    ...
});

Then start adding a new 'Canvas' section.

• IMPORTANT:

  Please add your own security to the API endpoints (public/api/)!

• If you have Source Code package (Super license), please refer to:

  readme-sourcecode.txt

  for additional information.

---

SUPPORT:

Email us at: [e-mail]