Skip to main content

Custom JavaScript

You can easily add custom features and functionalities in your web app by inserting custom JavaScript code. You can also add custom features by using JavaScript URL and Script tags.

How to Add a Custom JavaScript Feature?​

You can custom JavaSScript features by either adding a custom JavaScript code directly in the builder or JavaScript URL/Script Tag from external sources.

Here, we will add 3 different custom JavaScript features:

  • First, we will add a Custom JavaScript code to turn console log to yellow.
  • Second, we will add a pop up by using a JavaScript URL from S3 Bucket
  • Third, we will add another pop up using a Script Tag from Dropbox

Add a Custom JS Feature Using a Custom JavaScript Code​

We will add a Custom JavaScript code to turn console log to yellow.

1. Open App Settings​

Go to your builder console on DrapCode and take the cursor to the Settings icon in the bottom bar. Then click on the option, App Settings.

DrapCode Custom JS

2. Go to Custom CSS/JavaScript Button​

On the App Settings page, click on the Custom CSS/JavaScript button in the header as shown below.

DrapCode Custom JS

3. Select Custom JavaScript​

As you click on the Custom CSS/JavaScript button, a drop-down menu will open. Click on the Custom JavaScript option.

DrapCode Custom JS

As select the Custom JavaScript option, you will be redirected to Custom JavaScript page under app settings.

DrapCode Custom JS

4. Copy Custom JS Code​

You can directly add any custom JS code in the builder or copy paste it from external sources. In the current example, we will add a JS code to turn the color of console log to yellow.

DrapCode Custom JS

5. Paste the Custom JS Code​

Go to the builder and paste the code in the Add Custom JS section as shown below. Once done, click the Add button.

DrapCode Custom JS

6. Open the Web App in Preview/Publish Mode​

As we have added a JS code to change the console log color, so let's open the web app in the preview or publish mode and then open the page in the inspect mode.

As you can see below, console log is in yellow color.

DrapCode Custom JS

Add a Custom JS Feature Using a JavaScript URL​

1. Click Add JavaScript URL/Script Tag Button​

To add a custom JavaScript feature, you can also add a JavaScript URL or Script Tag. So, click on the Add JavaScript URL/Script Tag button and add a JS URL.

DrapCode Custom JS

2. Copy the JavaScript URL​

You can add JavaScript URL/Script Tag from external sources and databases as well.

In the current example, we will add a JavaScript URL from Amazon S3 Bucket. It will add a pop up when you will open your web app.

DrapCode Custom JS

3. Paste the JavaScript URL​

Paste the JavaScript URL and click the Add JavaScript URL/Script Tag button.

DrapCode Custom JS

4. Open the Web App in Preview/Publish Mode​

Open the web app in the preview or publish mode. As you can see below, a pop up appears as the page opens.

DrapCode Custom JS

Add a Custom JS Feature Using Script Tag​

1. Click Add JavaScript URL/Script Tag Button​

Click on the Add JavaScript URL/Script Tag button to add a custom JavaScript feature using a Script Tag.

DrapCode Custom JS

2. Copy the JavaScript URL​

You can add JavaScript URL/Script Tag from external sources and databases as well.

In the current example, we will add a Script Tag from Dropbox. It will add another pop up followed by the first pop we have previously added.

DrapCode Custom JS

3. Paste the JavaScript URL​

Paste the Script Tag and click the Add JavaScript URL/Script Tag button.

DrapCode Custom JS

4. Open the Web App in Preview/Publish Mode​

Open the web app in the preview or publish mode. As you can see below, when you click OK button of the first pop, a new pop up opens.

DrapCode Custom JS