---
updatedAt: 2025-11-05T21:11:51.000Z
agentTools:
  projectIndex: https://developers.short.io/llms.txt
---

# Creating short links from JavaScript application

Another way to create short links is by using a POST HTTP request to <https://api.short.io/links/public>, with JSON body.

## Prerequisites

1. [Create a public API key ](https://developers.short.io/docs/creating-an-api-key)from the **Integrations and API** menu: <https://app.short.io/settings/integrations/api-key>

<Image align="left" width="50% " src="https://files.readme.io/82b41741bb9dedd0ce39d921b5fa735fe825e686a0ca8c89cc65895254a4de5c-Screenshot_from_2025-05-30_13-31-41.png" />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

2. Create an .html file and include the following code:

> 📘
>
> Please replace **example.xyz** and **{user.apiKey}** with the appropriate values.

```html HTML + JavaScript
<html>
  <head>
    <link>
  </head>
  <body>
    <h1 class="message">Shorten your first link!</h1>
      <div>
          <input name="text" type="url" value  id="linkinput" placeholder="Paste a URL to shorten" >
          <input type="submit" id="myinput" value="Shorten">
      </div>
    <p id="message"></p>
 <script>
document.getElementById("myinput").onclick = function() {
  var link = document.getElementById("linkinput").value;
  var data = {
    "domain":"example.xyz",
    "originalURL": link,
    "allowDuplicates":false }; 
 fetch('https://api.short.cm/links/public', {
    method: 'post',
    headers: {
      'accept': 'application/json',
      'Content-Type': 'application/json',
      'authorization': '<<apiKey>>'
    },
    body: JSON.stringify(data)
  }) .then(function(response) {
        return response.json();
    }) 
    .then(function(data){ 
    document.getElementById("message").innerHTML = "Your short link is " + data.shortURL })
    document.getElementById("linkinput").value='';
 }
    </script>
  </body>
</html>
```

## To create short links using Javascript

Before testing the functionality, it is necessary to host your file on a server/domain. One simple method to demonstrate how the code works is to deploy it to the [Cloudflare Pages](https://pages.cloudflare.com/) platform:

1. From your Cloudflare Dashboard navigate to the **Workers and Pages** -> **Pages** tab:

<Image align="center" src="https://files.readme.io/cca8fc7759af61b8b7a463d8d1ad81869b6447a9871cf6a5726434a85f2ffa4e-Screenshot_from_2025-05-30_15-59-22.png" />

<br />

2. In the **Use direct upload** section click on **Get started**.
3. Enter a name for your project and click on **Create project**:

<Image align="left" width="80% " src="https://files.readme.io/b6fc2c41f64e067a55cbb6aca2c31f7d74e39ecc2cb42b802c8c5288bea08c8d-Screenshot_from_2025-05-30_11-52-45.png" />

<br />

4. Drag or upload the .html file that you created as .zip archive or included in a folder:

<Image align="center" src="https://files.readme.io/c11684dbd1ab583c1de543f61dc4679f7a231c8b0d3cadba2caae3bfdb90759f-Screenshot_from_2025-05-30_11-53-32.png" />

<Image align="center" src="https://files.readme.io/10fc8384f9c657285ae748db1c1521f3006db8d623e858c103bfb64051949210-Screenshot_from_2025-05-30_12-04-34.png" />

5. After the successful upload click on **Deploy site**.
6. A message including the name of your hosted page is displayed:

<Image align="left" width="80% " src="https://files.readme.io/b5ae9bfbd61f1a1f43501f116c9e78a896fdbce4b9d22fb7f2df2a7e0fbab26a-Screenshot_from_2025-05-30_15-59-22a.png" />

7. In your browser's address bar enter the above name followed by **/the-name-of-the-html-file**, *for example*: <https://shortio-js.pages.dev/short_links_js.html>. The following website is displayed:

<Image align="left" width="80% " src="https://files.readme.io/bcb76db7f4a51ddc33c7eebca478f3ba257176c1803fffefa7732c754c93bea4-Screenshot_from_2025-05-30_12-07-59.png" />

8. **Paste a URL to shorten** in the field and click on **Shorten**. A message with the newly created short link is displayed below:

<Image align="left" width="70% " src="https://files.readme.io/2f6f37dcb24d228948c49398bc742bf42a7ad6eadb9414e29bb1e89b8a16661c-Screenshot_from_2025-05-30_12-12-04.png" />

<br />

<br />

<br />

<br />

You can review the short link from the **Short.io** Dashboard:

<Image align="center" src="https://files.readme.io/69bd2f2afb5f108f63ccdf8afb3afaeb347a1f0c574ae27fb97f715ded5e9dd1-Screenshot_from_2025-05-30_12-13-25.png" />