Create Integration template
1. Create Integration Template
Description:
To create an app this step is the starting point, which allows you to give a name to your app, what is the type of your app and what parameters your app needs to bring proper data to q-play screens.
For a type “Webcapture” you will need to add a few basic settings and script to this template but why?
Suppose you have a website named myYoutube.com and you would like to take a screenshot of your history of videos that you watched and display on one of your screens. You know already that Webcapture needs to know a few things before it can take a screenshot. Let's write those things down:
i - URL that is myYoutube.com
ii - What type of login you want to use like with Google (SSO) or simple username/password
iii - Your Username
iv - Your Password
These things will go inside settings and what about script? Script will help you perform certain actions that need to be done for a successful login. For example, if you have any website that requires a login on a webpage, you will need to find out XPath to your elements like location of username input field, password field and Login button. You will be writing this in script to instruct our system where the username field is and type username from settings we made and same goes for password and after that we instruct the script to click on Login button and wait for the page to login properly.
Enough with talking and lets write a simple script for a website named “ekstrabladet.dk”.
1- POST request to: {{api_url}}/developer/integration-templates
2- Header Should have this: Authorization: Bearer access_token (from Step # 2.3)
3- In form-data add following key value pairs:
i- name: “Ekstrabladet”
ii- type: “webcapture”
iii- icon: “https://ekstrabladet.dk/assets/svg/ekstrabladet.svg?v2”
iv- description: “Latest news app”
v- visible: 1
4- Fire the request and you should get 201 response along with data. Note “id”. This will help later to create resources for this template.
5- At this point you will see your app under “New Integration” on this page: https://app.q-play.io/integrations#/app-integrations
6- Search your app on that page popup and click “Configure”
7- You can type app name “EkstraBladet”
8- In Url you can type “https://ekstrabladet.com”
9- Click “Save”
10- Your Integration Template is saved in your account.
2. Create Integration Template Resrources
Description:
Template Resources are used to guide Integration Templates what to do after your website is ready after performing all settings and scripts from Integration Templates.
So to take regular screenshots of your app you will need “Integration Template Resources”.
Lets create one:
1- Create POST request to:
{{base_url}}/developer/integration-templates/{{template_id}}/resources
2- In Body > raw (make sure to send raw in JSON format)
3- In raw body you can type following:
{
"identifier": "report",
"name": "Report",
"mime_type": "image/png",
"settings": {
"search_text": {
"type": "string",
"label": "Search Text",
"required": false,
"visible": true,
"order": 120
}
},
"script": {
"url": "$base_url$url",
"options": {
"timeout": 60000,
"waitUntil": "networkidle0"
},
"steps": [
{
"sleep": [
2000
]
}
]
},
"setup": {
"viewport": {
"width": "$width",
"height": "$height"
}
}
}
About above json:
Identifier, name and mime_type are basics of creating Template Resources.
Settings, Script and Setup changes based on your needs for how and when to take a screenshot.
Settings: In settings you can mention input fields you need to get input from users.
Script: Script is used to perform actions on the page. We have three properties here:
url, options and steps. In “url” we typed “$base_url$url” where $base_url comes from Step#3.8, $url comes from when you add a template resource. $url is a sub url for $base_url.
In “options” you can tell it to wait for a timeout or wait until the network is idle.
In “steps” you tell what to do by using one or plenty of the function available in the Json Script.
In our case we are just waiting for 2000 milliseconds and then it will take a screenshot.
3. Add Resource
Description:
Now that the resource is created for this template, we need to add this resource in Integration. Click on the integration you added in Step#3.10
Give any name and type / in URL and click save button.
Click small refresh button above the Image and it will take a new screenshot for you.
Finally after taking a screenshot it will look something like this:
4. Update Integration Template and Resources
Description:
If something doesn’t go as planned and the screenshot fails you need to head towards Script Logs and find out what's wrong and then update your integration template and resource accordingly.
To update Integration Template, you have to make a patch request to: {{api_url}}/developer/integration-templates/{{template_id}}
To update integration template resources, you have to make a patch request to:
{{api_url}}/developer/integration-templates/{{template_id}}/resources/report
Every time you send update, you can quickly take a new screenshot but just pressing save button and clicking small refresh icon on template.
Related Articles
Create WebCapture app
This guide require a Integration template, read this guide to create integration template. Description: When all is running well you can finally create your app. 1- Send POST request to: {{base_url}}/developer/apps 2- In Body > Raw (json): { "name": ...Understand integration templates types
Integrations templates can be used to retrieve data, views, or information from external systems. WebCapture Integrations These integrations access web services by using login credentials. They allow content to be displayed through a WebCapture app ...Create Web app
CommingUnderstand app types
This guide outlines the different types of apps available in Q-Play. An app is used to display content within a presentation in the DesignTool. The type of content an app displays depends on its intended function. Below, you will find descriptions of ...App Developer - Get Started
These instructions are essential for developers looking to build or integrate apps using Q-Play’s platform. By ensuring you have developer rights, you unlock access to tools and resources needed for app development. OAuth2 integration is a critical ...