Flipabit
  • Flipabit
  • Getting started
    • Flipabit overview
    • Create project
    • Run on device
    • Build
      • Build for iOS
      • Build for Android
      • Build for Desktop
    • Publish to App Stores
      • Submit to App Store
      • Submit to Google Play
  • Layers
    • Select layer
    • Change order, visibility and name
    • Copy and paste
    • Move layer
    • Resize layer
    • Rotate layer
    • Align layers
    • Arrange layers
    • Navigation layer
      • Display page title
      • Display Tab bar
      • Display Table of contents
      • Display Back button
      • Next/Prev buttons
      • Navigation actions
  • Pages
    • Add or delete page
    • Open page
    • Page background and overlay
  • Widgets
    • Image
    • Video
    • Text
    • PDF
    • Web
    • Diorama
    • Audio
    • Animation
    • Camera
    • YouTube
    • Map
    • Chart
    • Calendar
    • Table
    • Form
    • 3D Model
  • Groups
    • Add group
    • Move and resize group
  • Style
    • Opacity
    • Borders
    • Background
    • Opacity mask
    • Overlay
    • Margins
    • Blur
    • Copy and paste style
  • Interactivity
    • Navigate between pages
    • Maximize widget
    • Drag widget
    • Disable widget
  • Project
    • Resolution
    • Orientation
    • Status Bar
    • Settings
    • Publish settings
  • Animation
    • Page animation
    • Maximize animation
    • Position animation
    • Size animation
    • Size and position animation
    • Rotation animation
    • Opacity animation
    • Color animation
    • Blur animation
  • Actions
    • Actions Editor Overview
    • Add action
    • Suspend actions
    • Arguments
    • Delay action
    • Animation settings
    • Repeat action
  • Data & backend
    • Airtable
    • Google Sheets
  • Networking
  • Tutorials
  • API
    • Project
    • Page
    • Group
    • Widget
      • Image
      • Text
      • Video
      • Diorama
      • Audio
      • Web
      • Animation
      • Camera
      • YouTube
      • Map
      • Chart
      • Calendar
      • Table
      • Form
      • Record
      • 3d model
  • ⭐Updates
  • 🎁Get Flipabit
Powered by GitBook
On this page
  • Examples
  • Zapier
  • Mailgun

Was this helpful?

Networking

A guide to work with network requests and responses. Using rest api with Flipabit.

PreviousGoogle SheetsNextTutorials

Last updated 4 years ago

Was this helpful?

The XMLHttpRequest object allows the user to register a response handle function and a url. A request can be send using one of the http verbs (get, post, put, delete, ...) to make the request. When the response arrive the handle function is called. The handle function is called several times. Every-time the request state has changed (for example headers have arrived or request is done).

Here a short example:

function request() {
    var xhr = new XMLHttpRequest();
    xhr.onreadystatechange = function() {
        if (xhr.readyState === XMLHttpRequest.HEADERS_RECEIVED) {
            print('HEADERS_RECEIVED');
        } else if(xhr.readyState === XMLHttpRequest.DONE) {
            print('DONE');
        }
    }
    xhr.open("GET", "http://example.com");
    xhr.send();
}

Read more:

Examples

Zapier

2. Add following fields

3. Edit Template

4. Turn on your ZAP

5.Paste Webhook URL into code

The code:

var xhr = new XMLHttpRequest();

xhr.onreadystatechange = function() {

    if(xhr.readyState === XMLHttpRequest.DONE) {
        console.log("Status code is: " + xhr.status + " (" + xhr.statusText + ")")
        if (xhr.status == 200) {
            console.log("responseText: ")
            console.log(xhr.responseText.toString())            
            var json = JSON.parse(xhr.responseText.toString())
            console.log("json.status: ")
            console.log(json.status)
        }
    }
}

xhr.open("POST", "https://hooks.zapier.com/hooks/catch/YYYYYY/ZZZZZZ/");

xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
var data =  "email="+encodeURIComponent("email@example.org") + 
            "&text="+encodeURIComponent("Message body text") + 
            "&subject="+encodeURIComponent("Email subject")

xhr.send(data)

Mailgun

1. Open domain info in mailgun dashboard

2. Use the following code to send email. Replace it with your Domain and API Key:

function request() {
    var xhr = new XMLHttpRequest();
    xhr.onreadystatechange = function() {        

        if(xhr.readyState === XMLHttpRequest.DONE) {
            console.log("Status code is: " + xhr.status + " (" + xhr.statusText + ")")

            if (xhr.status == 200) {
                console.log("responseText: ")
                console.log(xhr.responseText.toString())

                var json = JSON.parse(xhr.responseText.toString())
                console.log("json.message: ")
                console.log(json.message)
            }            
        }
    }

    xhr.open("POST", "https://api.mailgun.net/v3/sandboxXXXXXXXXXXXXXXXXXXXXXXXXXXXX.mailgun.org/messages");

    xhr.setRequestHeader('Authorization', "Basic " + Qt.btoa("api:key-YYYYYYYYYYYYYYYYYYYYYYYYY"));
    xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");

    var data =  "from="+encodeURIComponent("email@example.org") + 
                "&to="+encodeURIComponent("another@example.org") + 
                "&subject="+encodeURIComponent("Subject message") + 
                "&text="+encodeURIComponent("Message body text")

    xhr.send(data)
}

Using Webhooks. Download the example.

1. Create new ZAP

Send email with . Download the example.

MDN web docs - Using XMLHttpRequest
QML Book - HTTP Requests
QML Book - Rest Api
Zapier
zapier.pma
https://zapier.com/apps/email/integrations/webhook/62/turn-webhooks-into-sent-emails
mailgun
mailgun.pma