Submit JSON

https://www.submitjson.com/docs
Admin
Submit JSON helps web developers streamline the submission half of form submissions by providing...
Tokens:21,635
Snippets:195
Trust Score:6.1
Update:4 months ago
Show doc for...
Tokens:
Raw
### Install submitjson and vue

Source: https://www.submitjson.com/docs/example-vue

Install the necessary packages using pnpm, npm, or yarn.

```shell
pnpm add submitjson vue # OR npm i OR yarn add

```

--------------------------------

### Submit JSON Client Installation

Source: https://www.submitjson.com/docs/js-client

Install the Submit JSON client using npm, pnpm, or yarn.

```APIDOC
## Install

Install the client with a package manager:

```bash
npm install submitjson # || pnpm add submitjson || yarn add submitjson
```
```

--------------------------------

### Install Submit JSON JS Client

Source: https://www.submitjson.com/docs/example-node

Install the submitjson package using npm, pnpm, or yarn.

```shell
npm i submitjson # OR pnpm add OR yarn add

```

--------------------------------

### Install Submit JSON Package

Source: https://www.submitjson.com/docs/example-svelte

Install the submitjson package using pnpm, npm, or yarn.

```shell
pnpm add submitjson # OR npm i OR yarn add
```

--------------------------------

### Install submitjson, vue, vee-validate, and yup

Source: https://www.submitjson.com/docs/example-vue

Install the required packages for advanced form handling with validation.

```shell
pnpm add submitjson vue vee-validate yup

```

--------------------------------

### Install Dependencies

Source: https://www.submitjson.com/docs/example-nextjs

Install the necessary packages for Submit JSON integration, form handling, and validation in your Next.js project.

```shell
pnpm add submitjson zod react-hook-form @hookform/resolvers
```

--------------------------------

### Install Dependencies with pnpm

Source: https://www.submitjson.com/docs/example-nuxt

Install the necessary packages for Submit JSON, vee-validate, zod, and @vee-validate/zod using pnpm.

```shell
pnpm add submitjson vee-validate zod @vee-validate/zod

```

--------------------------------

### Install Submit JSON and Dependencies

Source: https://www.submitjson.com/docs/example-react

Install the submitjson package along with Formik and Yup using npm, pnpm, or yarn.

```shell
npm i submitjson react formik yup # OR pnpm add OR yarn add

```

--------------------------------

### Import and Initialize SubmitJSON Client

Source: https://www.submitjson.com/docs/js-client

Import the SubmitJSON client and create a new instance with your API key and endpoint. This example demonstrates a basic submission.

```typescript
import SubmitJSON from 'submitjson'

const sj = new SubmitJSON({
  apiKey: 'sjk_xxxxxxxxxxxxxx',
  endpoint: 'XxXxXxXxX'
})

const data = await sj.submit({
  name: 'Yo Yoerson',
  message: 'Yo',
  powerLevel: 9001,
})

console.log('Submission', data)
```

--------------------------------

### Svelte Form Notification Example

Source: https://www.submitjson.com/docs/examples

An example using Svelte for form submission notifications. This demonstrates how to handle form state and API calls within a Svelte component.

```javascript
<script>
  let name = '';
  let email = '';
  let message = '';

  async function handleSubmit() {
    const formData = {
      name,
      email,
      message
    };

    try {
      const response = await fetch('https://api.submitjson.com/your_form_id', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json'
        },
        body: JSON.stringify(formData)
      });

      if (response.ok) {
        alert('Message sent successfully!');
        name = '';
        email = '';
        message = '';
      } else {
        alert('Failed to send message.');
      }
    } catch (error) {
      console.error('Error submitting form:', error);
      alert('An error occurred.');
    }
  }
</script>

<form on:submit|preventDefault={handleSubmit}>
  <label for="name">Name:</label>
  <input type="text" id="name" bind:value={name} required />

  <label for="email">Email:</label>
  <input type="email" id="email" bind:value={email} required />

  <label for="message">Message:</label>
  <textarea id="message" bind:value={message} required></textarea>

  <button type="submit">Send Message</button>
</form>

```

--------------------------------

### HTML + JS Form Submission

Source: https://www.submitjson.com/docs/examples

Example of submitting a form using plain HTML and JavaScript. No external libraries are required.

```html
<form action="https://api.submitjson.com/your_form_id" method="POST">
  <label for="name">Name:</label><br>
  <input type="text" id="name" name="name"><br>
  <label for="email">Email:</label><br>
  <input type="email" id="email" name="email"><br><br>
  <input type="submit" value="Submit">
</form>
```

--------------------------------

### Initialize SubmitJSON Client with Default Options

Source: https://www.submitjson.com/docs/js-client

Example of initializing the SubmitJSON client with default options, such as email notifications and submission format, which will override endpoint settings.

```typescript
// ~/submitjson.ts
import SubmitJSON from 'submitjson'

export const sj = new SubmitJSON({
  apiKey: 'sjk_xxxxxxxxxxxxxx',
  endpoint: 'XxXxXxXxX',
  options: { // set defaults for this client & override endpoint settings
    emailNotification: true,
    submissionFormat: 'raw',
    submissionSound: 'none',
  },
})
```

--------------------------------

### Vue.js Full Form Submission

Source: https://www.submitjson.com/docs/examples

A more comprehensive Vue.js example for form submission, potentially including more fields or advanced handling.

```javascript
<template>
  <form @submit.prevent="submitForm">
    <label for="name">Name:</label>
    <input type="text" id="name" v-model="formData.name" required>

    <label for="email">Email:</label>
    <input type="email" id="email" v-model="formData.email" required>

    <label for="message">Message:</label>
    <textarea id="message" v-model="formData.message" required></textarea>

    <button type="submit">Send Message</button>
  </form>
</template>

<script>
export default {
  data() {
    return {
      formData: {
        name: '',
        email: '',
        message: ''
      }
    };
  },
  methods: {
    async submitForm() {
      try {
        const response = await fetch('https://api.submitjson.com/your_form_id', {
          method: 'POST',
          headers: {
            'Content-Type': 'application/json'
          },
          body: JSON.stringify(this.formData)
        });
        if (response.ok) {
          alert('Message sent successfully!');
          this.formData = { name: '', email: '', message: '' }; // Reset form
        } else {
          alert('Failed to send message.');
        }
      } catch (error) {
        console.error('Error submitting form:', error);
        alert('An error occurred.');
      }
    }
  }
};
</script>

<style scoped>
form {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: 400px;
  margin: 0 auto;
}
label {
  font-weight: bold;
}
input, textarea {
  padding: 8px;
  border: 1px solid #ccc;
  border-radius: 4px;
}
button {
  padding: 10px;
  background-color: #4CAF50;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}
button:hover {
  background-color: #45a049;
}
</style>
```

--------------------------------

### Example Custom Submission Template

Source: https://www.submitjson.com/docs/custom-templates

This template demonstrates variable interpolation, conditional logic, and safe HTML tags for displaying submission data. It includes links to view the endpoint and submission details.

```html
<strong>New Lead</strong>

<ul>
  <li>Name: {{ name }}</li>
  <li>Email: {{ email }}</li>
  <li>Company: {{ company }}</li>
</ul>

{{#if budget}}
  <strong>Budget: {{ budget }}</strong>
{{else}}
  No budget provided
{{/if}}

<a href="https://www.submitjson.com/endpoints/{{ submission.endpointSlug }}">
  View endpoint ({{ submission.endpointName }})
</a>

<a href="https://www.submitjson.com/submissions/{{ submission.submissionId }}">
  View submission details
</a>


```

--------------------------------

### Vue.js Basic Form Submission

Source: https://www.submitjson.com/docs/examples

A basic example of form submission using Vue.js. This demonstrates how to bind form data and handle submission within a Vue component.

```javascript
<template>
  <form @submit.prevent="submitForm">
    <input type="text" v-model="formData.name" placeholder="Name">
    <input type="email" v-model="formData.email" placeholder="Email">
    <button type="submit">Submit</button>
  </form>
</template>

<script>
export default {
  data() {
    return {
      formData: {
        name: '',
        email: ''
      }
    };
  },
  methods: {
    async submitForm() {
      try {
        const response = await fetch('https://api.submitjson.com/your_form_id', {
          method: 'POST',
          headers: {
            'Content-Type': 'application/json'
          },
          body: JSON.stringify(this.formData)
        });
        if (response.ok) {
          console.log('Form submitted successfully!');
        } else {
          console.error('Form submission failed.');
        }
      } catch (error) {
        console.error('Error submitting form:', error);
      }
    }
  }
};
</script>
```

--------------------------------

### React Form Submission with Formik and Yup

Source: https://www.submitjson.com/docs/examples

Example of form submission in React using Formik for form handling and Yup for validation. This provides a robust way to manage form state and validation.

```javascript
import React from 'react';
import { useFormik } from 'formik';
import * as Yup from 'yup';

const validationSchema = Yup.object({
  name: Yup.string().required('Name is required'),
  email: Yup.string().email('Invalid email format').required('Email is required'),
  message: Yup.string().required('Message is required'),
});

function ContactForm() {
  const formik = useFormik({
    initialValues: {
      name: '',
      email: '',
      message: '',
    },
    validationSchema: validationSchema,
    onSubmit: async (values) => {
      try {
        const response = await fetch('https://api.submitjson.com/your_form_id', {
          method: 'POST',
          headers: {
            'Content-Type': 'application/json',
          },
          body: JSON.stringify(values),
        });
        if (response.ok) {
          alert('Message sent successfully!');
          formik.resetForm();
        } else {
          alert('Failed to send message.');
        }
      } catch (error) {
        console.error('Error submitting form:', error);
        alert('An error occurred.');
      }
    },
  });

  return (
    <form onSubmit={formik.handleSubmit}>
      <div>
        <label htmlFor="name">Name</label>
        <input
          id="name"
          name="name"
          type="text"
          onChange={formik.handleChange}
          onBlur={formik.handleBlur}
          value={formik.values.name}
        />
        {formik.touched.name && formik.errors.name ? (
          <div>{formik.errors.name}</div>
        ) : null}
      </div>

      <div>
        <label htmlFor="email">Email</label>
        <input
          id="email"
          name="email"
          type="email"
          onChange={formik.handleChange}
          onBlur={formik.handleBlur}
          value={formik.values.email}
        />
        {formik.touched.email && formik.errors.email ? (
          <div>{formik.errors.email}</div>
        ) : null}
      </div>

      <div>
        <label htmlFor="message">Message</label>
        <textarea
          id="message"
          name="message"
          onChange={formik.handleChange}
          onBlur={formik.handleBlur}
          value={formik.values.message}
        ></textarea>
        {formik.touched.message && formik.errors.message ? (
          <div>{formik.errors.message}</div>
        ) : null}
      </div>

      <button type="submit">Send Message</button>
    </form>
  );
}

export default ContactForm;

```

--------------------------------

### Next.js Contact Form with Server Actions

Source: https://www.submitjson.com/docs/examples

Example of a contact form in Next.js utilizing Server Actions for form submission. This approach allows server-side logic directly within components.

```javascript
// app/contact/page.js (or your component file)
import { submitContactForm } from './actions'; // Assuming actions.js contains the Server Action

export default function ContactPage() {
  return (
    <form action={submitContactForm}>
      <label htmlFor="name">Name:</label>
      <input type="text" id="name" name="name" required />

      <label htmlFor="email">Email:</label>
      <input type="email" id="email" name="email" required />

      <label htmlFor="message">Message:</label>
      <textarea id="message" name="message" required></textarea>

      <button type="submit">Send Message</button>
    </form>
  );
}

// app/contact/actions.js
'use server';

export async function submitContactForm(formData) {
  const name = formData.get('name');
  const email = formData.get('email');
  const message = formData.get('message');

  // Here you would typically send the data to SubmitJSON API
  // For example:
  // await fetch('https://api.submitjson.com/your_form_id', {
  //   method: 'POST',
  //   headers: {
  //     'Content-Type': 'application/json',
  //   },
  //   body: JSON.stringify({ name, email, message }),
  // });

  console.log('Received submission:', { name, email, message });
  // Revalidate cache or redirect if necessary
  // redirect('/thank-you');
}

```

--------------------------------

### Nuxt.js Content Reporting Notification

Source: https://www.submitjson.com/docs/examples

Example for Nuxt.js demonstrating how to receive notifications for reported content. This likely involves a form submission to the SubmitJSON API.

```javascript
<template>
  <form @submit.prevent="reportContent">
    <textarea v-model="reportMessage" placeholder="Describe the issue..."></textarea>
    <button type="submit">Report Content</button>
  </form>
</template>

<script setup>
import { ref } from 'vue';

const reportMessage = ref('');

const reportContent = async () => {
  try {
    const response = await fetch('https://api.submitjson.com/your_form_id', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json'
      },
      body: JSON.stringify({ message: reportMessage.value })
    });

    if (response.ok) {
      alert('Content reported successfully!');
      reportMessage.value = '';
    } else {
      alert('Failed to report content.');
    }
  } catch (error) {
    console.error('Error reporting content:', error);
    alert('An error occurred.');
  }
};
</script>

```

--------------------------------

### Node.js Express Server-Side Notification

Source: https://www.submitjson.com/docs/examples

Server-side notification example using Node.js and Express. This snippet demonstrates how to handle form submissions on the backend.

```javascript
const express = require('express');
const app = express();
const port = 3000;

app.use(express.json());

app.post('/your_form_id', (req, res) => {
  console.log('Received submission:', req.body);
  res.sendStatus(200);
});

app.listen(port, () => {
  console.log(`Server listening at http://localhost:${port}`);
});
```

--------------------------------

### HTMX Form Submission with JSON

Source: https://www.submitjson.com/docs/examples

Example of form submission using HTMX, sending data as JSON. This is useful for dynamic updates without full page reloads.

```html
<form hx-post="/your_endpoint" hx-trigger="submit" hx-swap="outerHTML" hx-headers='{"Content-Type": "application/json"}'>
  <label for="name">Name:</label>
  <input type="text" id="name" name="name" required />

  <label for="email">Email:</label>
  <input type="email" id="email" name="email" required />

  <label for="message">Message:</label>
  <textarea id="message" name="message" required></textarea>

  <button type="submit">Send Message</button>
</form>

<!-- Example of a response fragment that might be swapped in -->
<div id="response-message">Submission status will appear here.</div>

```

--------------------------------

### Submit with reCAPTCHA Token in Request Body

Source: https://www.submitjson.com/docs/recaptcha

This example shows how to capture form data, including the reCAPTCHA token, and send it as part of the request body to the API. The `g-recaptcha-response` property is used for this purpose.

```javascript
document.getElementById('myForm').addEventListener('submit', async function (e) {
  e.preventDefault()
  const formData = new FormData(this);
  const data = Object.fromEntries(formData)
  // data is something like { ..., 'g-recaptcha-response': 'xxxxxx'}
  const response = await fetch('https://api.submitjson.com/v1/submit/XxXx', {
    method: 'POST',
    headers: {
      'content-type': 'application/json',
      'X-API-Key': 'sjk_xxx',
    },
    body: { data },
  })

  const submission = await response.json()
})
```

--------------------------------

### Submit JSON Bot Commands

Source: https://www.submitjson.com/docs/telegram

Available commands for the Submit JSON bot on Telegram to manage endpoint connections and get help.

```bash
/connect {endpoint_slug} {api_key}

```

```bash
/disconnect {endpoint_slug} {api_key}

```

```bash
/help

```

--------------------------------

### Astro Static Site Contact Form Notification

Source: https://www.submitjson.com/docs/examples

Example of implementing a contact form on a static site using Astro. This snippet shows how to handle form submissions, likely using a serverless function or an external API.

```javascript
--- A.astro ---
import Form from '../components/Form.jsx';
--- ---

<html lang="en">
<body>
  <h1>Contact Us</h1>
  <Form />
</body>
</html>

--- components/Form.jsx ---
export default function Form() {
  const handleSubmit = async (event) => {
    event.preventDefault();
    const formData = new FormData(event.target);
    const data = {
      name: formData.get('name'),
      email: formData.get('email'),
      message: formData.get('message'),
    };

    try {
      const response = await fetch('/api/submit-contact', { // Assuming an API route handles submission
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
        },
        body: JSON.stringify(data),
      });

      if (response.ok) {
        alert('Message sent successfully!');
      } else {
        alert('Failed to send message.');
      }
    } catch (error) {
      console.error('Error submitting form:', error);
      alert('An error occurred.');
    }
  };

  return (
    <form onSubmit={handleSubmit}>
      <label htmlFor="name">Name:</label>
      <input type="text" id="name" name="name" required />

      <label htmlFor="email">Email:</label>
      <input type="email" id="email" name="email" required />

      <label htmlFor="message">Message:</label>
      <textarea id="message" name="message" required></textarea>

      <button type="submit">Send Message</button>
    </form>
  );
}
--- 
// Example API route (e.g., src/pages/api/submit-contact.js)
// This would typically forward the data to SubmitJSON
/*
export async function POST({ request }) {
  const data = await request.json();
  console.log('Received contact submission:', data);
  // Replace with actual fetch to SubmitJSON API
  // const submitResponse = await fetch('https://api.submitjson.com/your_form_id', {
  //   method: 'POST',
  //   headers: {
  //     'Content-Type': 'application/json',
  //   },
  //   body: JSON.stringify(data),
  // });
  // return new Response(JSON.stringify({ success: submitResponse.ok }), { status: submitResponse.ok ? 200 : 500 });
  return new Response(JSON.stringify({ success: true }), { status: 200 });
}
*/

```

--------------------------------

### Submit JSON with Vue.js

Source: https://www.submitjson.com/docs

Example of using the SubmitJSON JS client with Vue.js to submit form data. Ensure you have configured the API key and endpoint.

```vue
<script setup>
import SubmitJSON from 'submitjson'
import { reactive } from 'vue'

const sj = new SubmitJSON({ apiKey: 'sjk_xxx', endpoint: 'XxXxXxXxX' })

const myForm = reactive({
  name: 'Dude',
  message: 'Yo',
})

async function onSubmit() {
  try {
    const data = await sj.submit(myForm)
  }
  catch (error) {
    alert(error)
  }
}
</script>

<template>
  <form @submit.prevent="onSubmit">
    <input v-model="myForm.name" name="name">
    <input v-model="myForm.message" name="message">
    <button type="submit">
      Submit
    </button>
  </form>
</template>

```

--------------------------------

### Submit with hCaptcha Token using JS Client

Source: https://www.submitjson.com/docs/hcaptcha

This example demonstrates how to pass an hCaptcha token to the SubmitJSON JavaScript client using the `hcaptchaToken` option for more versatile submissions.

```javascript
await sj.submit({ name: 'Zoro', loves: 'Getting lost' }, {
  hcaptchaToken: 'xxxxxxxxxx'
})
```

--------------------------------

### Angular Contact Us Form Component

Source: https://www.submitjson.com/docs/examples

An example of creating a contact form component in Angular. This snippet shows how to handle form inputs and submission within an Angular application.

```typescript
import { Component } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { FormsModule } from '@angular/forms';

@Component({
  selector: 'app-contact-us',
  standalone: true,
  imports: [FormsModule],
  template: `
    <form (ngSubmit)="onSubmit()">
      <div>
        <label for="name">Name:</label>
        <input type="text" id="name" [(ngModel)]="formData.name" name="name" required>
      </div>
      <div>
        <label for="email">Email:</label>
        <input type="email" id="email" [(ngModel)]="formData.email" name="email" required>
      </div>
      <div>
        <label for="message">Message:</label>
        <textarea id="message" [(ngModel)]="formData.message" name="message" required></textarea>
      </div>
      <button type="submit">Send Message</button>
    </form>
  `
})
export class ContactUsComponent {
  formData = {
    name: '',
    email: '',
    message: ''
  };

  constructor(private http: HttpClient) {}

  onSubmit() {
    this.http.post('https://api.submitjson.com/your_form_id', this.formData)
      .subscribe({
        next: (response) => {
          console.log('Message sent successfully!', response);
          alert('Message sent successfully!');
          this.formData = { name: '', email: '', message: '' }; // Reset form
        },
        error: (error) => {
          console.error('Error sending message:', error);
          alert('Failed to send message.');
        }
      });
  }
}

```

--------------------------------

### Submit JSON Client Initialization

Source: https://www.submitjson.com/docs/js-client

Import and create a new Submit JSON client instance. You can provide configuration options such as apiKey, endpoint, and default submission options.

```APIDOC
## Configuration

### Details

Import and create a new Submit JSON client instance. We recommend including your endpoint here for easier `submit` calls down the line. Pass in default options per client to override the current endpoint settings.

### Type

```typescript
interface SubmitJSONConfig {
  apiKey: string
  secretKey?: string
  endpoint?: string
  options: SubmitOptions
}

interface SubmitOptions {
  emailNotification?: boolean
  emailTo?: string
  emailReplyTo?: string
  emailBranding?: boolean
  emailSubject?: string
  emailFromName?: string
  submissionFormat?: 'pretty' | 'raw'
  submissionSound?: 'none' | 'beep' | 'blip' | 'block' | 'coin' | 'ding' | 'dink' | 'honk' | 'jump' | 'ping' | 'pong' | 'snare'
  recaptchaToken?: string
  turnstileToken?: string
  hcaptchaToken?: string
  discordNotification?: boolean
  slackNotification?: boolean
  telegramNotification?: boolean
}

interface SubmissionsQuery {
  page?: number
  order?: 'asc' | 'desc'
  period?: 'day' | 'week' | 'month' | '3months' | '6months' | 'year' | 'all'
  search?: string
  status?: 'all' | 'new' | 'seen'
}

class SubmitJSON {
  constructor(config: SubmitJSONConfig)

  // Submission
  submit(data, options?, endpoint?): Promise<Submission>

  // Endpoints
  getEndpoints(query?): Promise<Endpoint[]>
  getEndpoint(slug): Promise<EndpointResponse>
  getEndpointSubmissions(slug, query?): Promise<SubmissionsResponse>

  // Projects
  getProjects(query?): Promise<Project[]>
  getProject(slug): Promise<ProjectResponse>
  getProjectEndpoints(slug): Promise<Endpoint[]>
  getProjectSubmissions(slug, query?): Promise<SubmissionsResponse>

  // Submissions
  getSubmissions(query?): Promise<SubmissionsResponse>
  getSubmission(id): Promise<Submission>
  deleteSubmission(id): Promise<{ success: boolean }>
}
```

### Example

```typescript
// ~/submitjson.ts
import SubmitJSON from 'submitjson'

export const sj = new SubmitJSON({
  apiKey: 'sjk_xxxxxxxxxxxxxx',
  endpoint: 'XxXxXxXxX',
  options: { // set defaults for this client & override endpoint settings
    emailNotification: true,
    submissionFormat: 'raw',
    submissionSound: 'none',
  },
})
```
```

--------------------------------

### Initialize Multiple SubmitJSON Clients

Source: https://www.submitjson.com/docs/js-client

Demonstrates initializing multiple SubmitJSON clients for distinct purposes, allowing for separate configurations and concerns within an application. Subsequent submissions use the appropriate client.

```typescript
// submitjson.ts
import SubmitJSON from 'submitjson'

export const contactForm = new SubmitJSON({
  apiKey: 'sjk_xxxxxxxxxxxxxx',
  endpoint: 'XxXxXxXxX',
})

export const userSignupNotification = new SubmitJSON({
  apiKey: 'sjk_xxxxxxxxxxxxxx',
  endpoint: 'ZzZzZzZzZ',
})
// somewhere else in your code
const data = { name: 'Yo Yoerson', message: 'Yo' }
await contactForm.submit(data)
await userSignupNotification.submit(data)
```

--------------------------------

### Configure Custom Submission Format with JS Client

Source: https://www.submitjson.com/docs/custom-templates

Initialize the JS client with default options for submission format and template. This sets a project-wide default for custom templates.

```javascript
import SubmitJSON from 'submitjson'

const sj = new SubmitJSON({
  apiKey: 'sjk_xxxxxxxxxxxxxx',
  endpoint: 'XxXxXxXxX',
  options: {
    submissionFormat: 'custom',
    submissionTemplate: '<p><strong>{{ name }}</strong> ({{ email }})</p>',
  },
})

await sj.submit({
  name: 'Yo Yoerson',
  email: 'yo@yoerson.com',
})


```

--------------------------------

### Retrieve a Project by Slug

Source: https://www.submitjson.com/docs/js-client

Fetches a single project's details, including endpoints and integrations, using its unique slug. Requires an active paid plan.

```typescript
import SubmitJSON from 'submitjson'

const sj = new SubmitJSON({
  apiKey: 'sjk_xxxxxxxxxxxxxx',
  secretKey: 'sjsk_xxxxxxxxxxxxxx',
})

const project = await sj.getProject('my-website')

console.log('Project', project.project)
console.log('Endpoints', project.endpoints)
console.log('Slack Workspaces', project.slackWorkspaces)

```

--------------------------------

### Create SubmitJSON Client Instance

Source: https://www.submitjson.com/docs/example-vue

Create a reusable SubmitJSON client instance in a separate file for better organization.

```ts
// ./submitjson.ts
import SubmitJSON from 'submitjson'

export const sj = new SubmitJSON({ apiKey: 'sjk_xxx', endpoint: 'XxXxXxXxX' })

```

--------------------------------

### Retrieve Projects with Sorting Options

Source: https://www.submitjson.com/docs/js-client

Fetches all projects associated with the authenticated user. Allows sorting by name, date, submission count, or activity. Requires API key and secret key.

```typescript
import SubmitJSON from 'submitjson'

const sj = new SubmitJSON({
  apiKey: 'sjk_xxxxxxxxxxxxxx',
  secretKey: 'sjsk_xxxxxxxxxxxxxx',
})

// Get all projects sorted by name (default)
const projects = await sj.getProjects()

// Get projects sorted by submission count
const busyProjects = await sj.getProjects({ sort: 'submissions' })

console.log('Projects', projects)
```

--------------------------------

### getProjects()

Source: https://www.submitjson.com/docs/js-client

Retrieves all projects for the authenticated user, with optional sorting.

```APIDOC
## GET /projects

### Description
Retrieves a list of all projects associated with the authenticated user. Projects can be sorted by various criteria. Available on all paid plans.

### Method
GET

### Endpoint
/projects

### Parameters
#### Path Parameters
None

#### Query Parameters
- **sort** (string) - Optional - Specifies the sorting criteria. Allowed values: 'name', 'new', 'old', 'submissions', 'activity'.

### Request Example
```json
{
  "sort": "submissions"
}
```

### Response
#### Success Response (200)
- **Project[]** - An array of project objects.

#### Response Example
```json
[
  {
    "id": "proj_xxxxxxxxxxxxxx",
    "name": "Website Contact Form",
    "endpoints": 5,
    "submissions": 150,
    "createdAt": "2023-01-01T10:00:00Z"
  }
]
```
```

--------------------------------

### Configure Server Action for Submission

Source: https://www.submitjson.com/docs/example-nextjs

Set up a Next.js API route as a Server Action to handle form data and submit it using the Submit JSON client. Ensure your API key is stored securely in environment variables.

```.env.local
SUBMIT_JSON_API_KEY = sjk_xxxxxxxxxxxx
```

```ts
import SubmitJSON from 'submitjson'

const sj = new SubmitJSON({
  apiKey: process.env.SUBMIT_JSON_API_KEY,
  endpoint: 'XXXXXX'
})

export async function action({ request }) {
  const formData = await request.formData()
  // 🚛 Deliver your submission with one line of code
  const submission = await sj.submit(formData)

  const response = {
    message: 'Form submitted successfully',
    submission
  }

  return new Response(JSON.stringify(response), {
    status: 200,
    headers: {
      'Content-Type': 'application/json',
    },
  })
}
```

--------------------------------

### getProject()

Source: https://www.submitjson.com/docs/js-client

Retrieve a single project by its slug, including associated endpoints, integrations, and allowed origins. Available on all paid plans.

```APIDOC
## getProject(slug: string)

### Description
Retrieve a single project by its slug, including associated endpoints, integrations, and allowed origins. Available on all paid plans.

### Method
```
function getProject(slug: string): Promise<ProjectResponse>
```

### Parameters
#### Path Parameters
- **slug** (string) - Required - The unique identifier for the project.

### Request Example
```javascript
import SubmitJSON from 'submitjson'

const sj = new SubmitJSON({
  apiKey: 'sjk_xxxxxxxxxxxxxx',
  secretKey: 'sjsk_xxxxxxxxxxxxxx',
})

const project = await sj.getProject('my-website')

console.log('Project', project.project)
console.log('Endpoints', project.endpoints)
console.log('Slack Workspaces', project.slackWorkspaces)
```
```

--------------------------------

### Connect Endpoint to Telegram

Source: https://www.submitjson.com/docs/telegram

Use the `/connect` command with your endpoint slug and API key to link an endpoint to your Telegram chat. A confirmation email will be sent to validate the connection.

```bash
/connect {endpointSlug} {apiKey}
```

--------------------------------

### Integrate Report Form Component into Nuxt Page

Source: https://www.submitjson.com/docs/example-nuxt

Use the created `<ReportForm />` component within your Nuxt pages. This example shows how to integrate it into a page named 'report.vue' and set the page's SEO meta title.

```vue
<script setup lang="ts">
useSeoMeta({
  title: 'Report Comments with Submit JSON',
})
</script>

<template>
  <ReportForm />
</template>

```

--------------------------------

### getProject()

Source: https://www.submitjson.com/docs/js-client

Fetches details for a specific project identified by its slug.

```APIDOC
### getProject()

Fetches details for a specific project.

- **Parameters**
  - `slug` (string): The unique slug identifier for the project.
- **Returns**
  - `Promise<ProjectResponse>`: A promise that resolves with the project's details.
```

--------------------------------

### Integrate Submit JSON with Express

Source: https://www.submitjson.com/docs/example-node

Initialize the Submit JSON client and handle new user sign-up notifications on a '/register' route in an Express project. The data submitted can be any valid JSON object.

```typescript
import express, { Request, Response } from 'express'
import SubmitJSON from 'submitjson'

const app = express()
const port = 3000

const sj = new SubmitJSON({ apiKey: 'sjk_xxx', endpoint: 'XxXxXxXxX' })

app.post('/register', async (req: Request, res: Response) => {
  // ☝️ handle your register logic before this point
  // the data you submit can be any valid JSON object:
  const data = {
    notificationType: 'new-user',
    name: 'Yo Yoerson',
    email: 'yo@yoerson.com',
    membershipType: 'trial',
    currentPeriodEnd: '2023-02-23',
  }
  // submit your notification, overriding the endpoint defaults
  const submission = await sj.submit(data, {
    emailNotification: true,
    emailReplyTo: data.email,
    submissionFormat: 'pretty',
  })
  // ⚡️ easy peasy
  console.log(submission)
  res.status(200).end()
})

app.listen(port, () => {
  console.log(`Server is running at http://localhost:${port}`)
})

```

--------------------------------

### Create Nuxt Server Route for Submissions

Source: https://www.submitjson.com/docs/example-nuxt

Set up a server API route in Nuxt to handle incoming form submissions. This route initializes SubmitJSON with your API key and endpoint, reads the request body, and submits it.

```javascript
import SubmitJSON from 'submitjson'

export default defineEventHandler(async (event) => {
  const { submitJsonApiKey } = useRuntimeConfig(event)

  const sj = new SubmitJSON({ apiKey: submitJsonApiKey, endpoint: 'xxx' })

  const body = await readBody(event)

  const submission = await sj.submit(body) // optionally configure options

  return submission
})

```

--------------------------------

### getProjects()

Source: https://www.submitjson.com/docs/js-client

Retrieves a list of projects, optionally filtered by a query object.

```APIDOC
### getProjects()

Retrieves a list of projects.

- **Parameters**
  - `query` (SubmissionsQuery, optional): An object to filter or paginate the results.
- **Returns**
  - `Promise<Project[]>`: A promise that resolves with an array of project objects.
```

--------------------------------

### submit()

Source: https://www.submitjson.com/docs/js-client

Submits data to an endpoint. It can accept JSON objects, strings, or FormData. Optional configuration and endpoint overrides are supported.

```APIDOC
## POST /websites/submitjson

### Description
Submits data to an endpoint and provides real-time notifications. The function accepts data, optional configuration, and an optional endpoint.

### Method
POST

### Endpoint
/websites/submitjson

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
- **data** (Record<string, unknown> | string | FormData) - Required - The data to submit.
- **options** (SubmitOptions) - Optional - Configuration to override default settings.
- **endpoint** (string) - Optional - Overrides the default submission endpoint.

### Request Example
```json
{
  "name": "Yo Yoerson",
  "message": "Yo",
  "powerLevel": 9001
}
```

### Response
#### Success Response (200)
- **Submission** - The result of the submission.

#### Response Example
```json
{
  "submissionId": "sub_xxxxxxxxxxxxxx",
  "success": true,
  "message": "Data submitted successfully."
}
```
```

--------------------------------

### getProjectEndpoints()

Source: https://www.submitjson.com/docs/js-client

Retrieve all endpoints associated with a specific project. Available on all paid plans.

```APIDOC
## getProjectEndpoints(slug: string)

### Description
Retrieve all endpoints associated with a specific project. Available on all paid plans.

### Method
```
function getProjectEndpoints(slug: string): Promise<Endpoint[]>
```

### Parameters
#### Path Parameters
- **slug** (string) - Required - The unique identifier for the project.

### Request Example
```javascript
import SubmitJSON from 'submitjson'

const sj = new SubmitJSON({
  apiKey: 'sjk_xxxxxxxxxxxxxx',
  secretKey: 'sjsk_xxxxxxxxxxxxxx',
})

const endpoints = await sj.getProjectEndpoints('my-website')

console.log('Project Endpoints', endpoints)
```
```

--------------------------------

### getProjectSubmissions()

Source: https://www.submitjson.com/docs/js-client

Retrieve paginated submissions for all endpoints in a specific project with optional filtering. Available on all paid plans.

```APIDOC
## getProjectSubmissions(slug: string, query?: SubmissionsQuery)

### Description
Retrieve paginated submissions for all endpoints in a specific project with optional filtering. Available on all paid plans.

### Method
```
function getProjectSubmissions(
  slug: string,
  query?: SubmissionsQuery
): Promise<{ 
  submissions: Submission[], 
  submissionCount: number,
  totalPages: number,
  currentPage: number
}> 
```

### Parameters
#### Path Parameters
- **slug** (string) - Required - The unique identifier for the project.

#### Query Parameters
- **query** (SubmissionsQuery) - Optional - Filtering options for submissions (e.g., period, status, page).

### Request Example
```javascript
import SubmitJSON from 'submitjson'

const sj = new SubmitJSON({
  apiKey: 'sjk_xxxxxxxxxxxxxx',
  secretKey: 'sjsk_xxxxxxxxxxxxxx',
})

// Get all submissions for a project
const { submissions } = await sj.getProjectSubmissions('my-website')

// Get unread submissions from the last month
const recent = await sj.getProjectSubmissions('my-website', {
  period: 'month',
  status: 'new',
  page: 1,
})

console.log('Project Submissions', submissions)
```
```

--------------------------------

### Submit with reCAPTCHA Token via JS Client Option

Source: https://www.submitjson.com/docs/recaptcha

Demonstrates using the JS client to submit data, passing the reCAPTCHA token via the `recaptchaToken` option. This offers more versatility than the default request body method.

```typescript
await sj.submit({ name: 'Franky', loves: 'Vegapunk' }, {
  recaptchaToken: 'xxxxxxxxxx'
})
```

--------------------------------

### Retrieve All Submissions

Source: https://www.submitjson.com/docs/js-client

Fetches paginated submissions across all projects and endpoints, with optional filtering by project. Available on paid plans.

```typescript
import SubmitJSON from 'submitjson'

const sj = new SubmitJSON({
  apiKey: 'sjk_xxxxxxxxxxxxxx',
  secretKey: 'sjsk_xxxxxxxxxxxxxx',
})

// Get all submissions
const { submissions, totalPages } = await sj.getSubmissions()

// Get submissions from a specific project
const projectSubs = await sj.getSubmissions({
  project: 'my-website',
})

// Get new submissions from the last day
const today = await sj.getSubmissions({
  period: 'day',
  status: 'new',
  order: 'desc',
})

console.log('All Submissions', submissions)

```

--------------------------------

### Configure Nuxt Runtime Config

Source: https://www.submitjson.com/docs/example-nuxt

Configure your Nuxt project to use your Submit JSON API key stored in environment variables by adding it to the runtimeConfig in nuxt.config.ts.

```javascript
export default defineNuxtConfig({
  runtimeConfig: {
    submitJsonApiKey: process.env.NUXT_SUBMIT_JSON_API_KEY
  }
})

```

--------------------------------

### Retrieve Project Submissions

Source: https://www.submitjson.com/docs/js-client

Fetches paginated submissions for all endpoints within a project, with options for filtering. Available on paid plans.

```typescript
import SubmitJSON from 'submitjson'

const sj = new SubmitJSON({
  apiKey: 'sjk_xxxxxxxxxxxxxx',
  secretKey: 'sjsk_xxxxxxxxxxxxxx',
})

// Get all submissions for a project
const { submissions } = await sj.getProjectSubmissions('my-website')

// Get unread submissions from the last month
const recent = await sj.getProjectSubmissions('my-website', {
  period: 'month',
  status: 'new',
  page: 1,
})

console.log('Project Submissions', submissions)

```

--------------------------------

### Submit JSON with HTML and Vanilla JS Fetch API

Source: https://www.submitjson.com/docs/example-html

Submit JSON data using only native HTML and the Fetch API for a dependency-free solution. Ensure your endpoint slug and API key are correctly configured.

```html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Fetch API Form Submission</title>
</head>
<body>
  <form id="myForm">
    <label for="name">Name:</label>
    <input type="text" id="name" name="name" required>
    <label for="email">Email:</label>
    <input type="email" id="email" name="email" required>
    <button type="submit">Submit</button>
  </form>

  <script>
    document.getElementById('myForm').addEventListener('submit', async function (e) {
      e.preventDefault();

      try {
        const formData = new FormData(this);
        const data = Object.fromEntries(formData)

        // replace XxXx with your endpoint slug
        const response = await fetch(`https://api.submitjson.com/v1/submit/XxXx`, {
          method: 'POST',
          headers: {
            'content-type': 'application/json', // required
            'X-API-Key': 'sjk_xxx', // 🚨 Don't forget your API key!
          },
          body: { data }, // body must be an object w/ the "data" property
        })

        if (!response.ok) {
          throw new Error('Network response was not ok');
        }

        const submission = await response.json()

        console.log('Submitted data:', submission)
      } catch (error) {
        console.error('There was a problem with the fetch operation:', error);
      }
    });
  </script>
</body>
</html>

```

--------------------------------

### Retrieve Endpoints with Sorting Options

Source: https://www.submitjson.com/docs/js-client

Fetches all available endpoints for the authenticated user. Supports sorting by name, date, submission count, or activity. Requires an API key and secret key for public API routes.

```typescript
import SubmitJSON from 'submitjson'

const sj = new SubmitJSON({
  apiKey: 'sjk_xxxxxxxxxxxxxx',
  secretKey: 'sjsk_xxxxxxxxxxxxxx', // required for public API routes
})

// Get all endpoints sorted by name (default)
const endpoints = await sj.getEndpoints()

// Get endpoints sorted by most recent submissions
const recentEndpoints = await sj.getEndpoints({ sort: 'activity' })

console.log('Endpoints', endpoints)
```

--------------------------------

### Retrieve Project Endpoints

Source: https://www.submitjson.com/docs/js-client

Fetches all endpoints associated with a specific project using its slug. This feature is available on all paid plans.

```typescript
import SubmitJSON from 'submitjson'

const sj = new SubmitJSON({
  apiKey: 'sjk_xxxxxxxxxxxxxx',
  secretKey: 'sjsk_xxxxxxxxxxxxxx',
})

const endpoints = await sj.getProjectEndpoints('my-website')

console.log('Project Endpoints', endpoints)

```

--------------------------------

### getProjectSubmissions()

Source: https://www.submitjson.com/docs/js-client

Retrieves submissions for a specific project, with optional query parameters for filtering and pagination.

```APIDOC
### getProjectSubmissions()

Retrieves submissions for a specific project.

- **Parameters**
  - `slug` (string): The unique slug identifier for the project.
  - `query` (SubmissionsQuery, optional): An object to filter or paginate the results.
- **Returns**
  - `Promise<SubmissionsResponse>`: A promise that resolves with an array of submissions for the project.
```

--------------------------------

### submit()

Source: https://www.submitjson.com/docs/js-client

Submits data to a specified endpoint. This method can optionally take submission options and a specific endpoint URL.

```APIDOC
## API

### submit()

Submits data to a specified endpoint.

- **Parameters**
  - `data` (any): The data payload to submit.
  - `options` (SubmitOptions, optional): Options to customize the submission behavior.
  - `endpoint` (string, optional): The specific endpoint URL to submit to. If not provided, the client's default endpoint is used.
- **Returns**
  - `Promise<Submission>`: A promise that resolves with the submission details.
```

--------------------------------

### Submit Data with All Configuration Options

Source: https://www.submitjson.com/docs/js-client

Submits data to an endpoint using a configured SubmitJSON client, overriding default settings with detailed options for email notifications, submission format, and more. An explicit endpoint can also be provided.

```typescript
import SubmitJSON from 'submitjson'

const sj = new SubmitJSON({
  apiKey: 'sjk_xxxxxxxxxxxxxx',
  endpoint: 'XxXxXxXxX',
})

const data = await sj.submit({
  name: 'Yo Yoerson',
  message: 'Yo',
  powerLevel: 9001,
}, {
  emailNotification: true,
  emailTo: 'yo@yoerson.com',
  emailReplyTo: 'diff@differson.com',
  emailBranding: false,
  emailSubject: 'My custom subject line',
  emailFromName: 'My custom from name',
  submissionFormat: 'pretty',
  submissionSound: 'ping',
  recaptchaToken: 'xxxxxxxxxxx'
}, 'YyYyYyYyY') // overrides the endpoint set in the configuration

console.log('Submission', data)
```

--------------------------------

### getSubmissions()

Source: https://www.submitjson.com/docs/js-client

Retrieve paginated submissions across all endpoints and projects. Optionally filter by project. Available on all paid plans.

```APIDOC
## getSubmissions(query?: SubmissionsQuery & { project?: string })

### Description
Retrieve paginated submissions across all endpoints and projects. Optionally filter by project. Available on all paid plans.

### Method
```
function getSubmissions(
  query?: SubmissionsQuery & { project?: string }
): Promise<{ 
  submissions: Submission[], 
  submissionCount: number,
  totalPages: number,
  currentPage: number
}> 
```

### Parameters
#### Query Parameters
- **query** (SubmissionsQuery & { project?: string }) - Optional - Filtering options for submissions, including an optional project identifier.

### Request Example
```javascript
import SubmitJSON from 'submitjson'

const sj = new SubmitJSON({
  apiKey: 'sjk_xxxxxxxxxxxxxx',
  secretKey: 'sjsk_xxxxxxxxxxxxxx',
})

// Get all submissions
const { submissions, totalPages } = await sj.getSubmissions()

// Get submissions from a specific project
const projectSubs = await sj.getSubmissions({
  project: 'my-website',
})

// Get new submissions from the last day
const today = await sj.getSubmissions({
  period: 'day',
  status: 'new',
  order: 'desc',
})

console.log('All Submissions', submissions)
```
```
Tokens:
Raw