DRAWBOX Tutorial

this tutorial only works for supporter neocities accounts, nekoweb or sites that Non-strict Content Security Policy for free (for use external scripts). see https://content-security-policy.neocities.org/ to understand why. if you have a free account made after 2024 you have to use iframes as a workaround for drawbox to work.(aka hosting the page elsewhere) you could host your drawbox on github pages or nekoweb, or another site that has Non-strict Content Security Policy for free (use external scripts). an example of the iframe mirroring can be seen at my second neocities page: https://drawbox.neocities.org/

How to Setup

I did not create drawbox. However the Original guide site is gone, so I thought I would create a new one. Plus I have added a few new things to the code, and wanted to add on to the guide for that.

You will need a google account, and 3 Drawbox files.

1. drawbox.html The Canvas and input elements, as well as where the images get displayed.
2. drawbox.js this is the code that makes the drawbox work, and uploads image to imgur.
3. drawbox.css styling for the drawbox.

in the drawbox.js file you need to provide 6 variables. Below ill go over how to get these variables.

Step 1: create a google forms

create a form, you can call it whatever you like. add 2 "short answer" questions. i called mine "imgur link" and "name". then press the 3 dots up next to your pfp. press "pre-fill form". it will open a new tab in which your blank google form will be presented to you. input text into each short answer (for example, imgur and name) form and tap "get link". copy the link and open it up in a notes app.

this is mine:

https://docs.google.com/forms/d/e/1FAIpQLScbzFT1pxeIkp8yNB3fB7VD9V89Jbitr4h30Q3jXYjy54SlMQ/viewform?usp=pp_url&entry.258336726=imgur&r&entry.1862726355=name

Step 2: Create a google sheet

you then want to go back to the edit page of your form and click "responses". click "link to sheets" and create a sheet.
go to the sheet and create 2 more columns:

Approved

make this a checkmark column type

Comments

So you can add little comments to drawings if you want :)

Then navigate to your responses on your google form and press "view in sheets". once on your sheet, press "share" and change General access to "anyone with link":

You should get this link:

https://docs.google.com/spreadsheets/d/16jUCXXinqztl3sFdtpWur9yFCAiASDsvmIsF3xHv-BU/edit?usp=sharing

Step 3: Fill in the following Variables in your drawbox.js file.

GOOGLE_FORM_ID

the long string of text is your google form URL. i highlighted mine in yellow. 1FAIpQLScbzFT1pxeIkp8yNB3fB7VD9V89Jbitr4h30Q3jXYjy54SlMQ

IMGUR_ID

This is the Imgur Link form short answer id; i highlighted mine in blue entry.258336726

NAME_ID

This is the Name entry id for the form id; i highlighted mine in magenta entry.1862726355

DISPLAY_IMAGES

simply set this to true or false depending if you wish to display your images on your page or not. For example, maybe you want to have a seperate page for the images.

IMAGE_APPROVAL

Set this to true or false depending if you want to moderate / approve submitted images. Good for high traffic sites / bad actors.

GOOGLE_SHEET_ID

copy your ID (my one is highlighted in green above in step 2) 16jUCXXinqztl3sFdtpWur9yFCAiASDsvmIsF3xHv-BU - and paste it into the GOOGLE_SHEET_ID variable

thats it! if youve set up everything correctly, it should work. This is my first tutorial. If anything is confusing, please let me know. I also update the drawbox time from time, so if you follow my RSS feed, you should get updates when I add new features. you can email me at emma@3maqi.art with any questions. This guide was originally made at https://3maqi.art/ I also have mirror sites at https://drawbox.nekoweb.org/ and https://drawbox.neocities.org/.