Integrating an iFrame into your Site
With ShieldQ, customers can upload documents to your unified, secure queue. All you need to do is to set up and add a branded upload form to your web site. The upload form will be contained within an iFrame, fully branded and customized according to your site's look and feel.
Notes:
- Integration requires a basic understanding of HTML editing. For any questions, please feel free to contact ShieldQ customer support.
- The iFrame supports a mobile-responsive display. Thus, the host website should be mobile-responsive, too.
Setting up your iFrame upload form
1. Add the "upload" service by clicking the + button on the top bar of the control panel. Choose an owner. Choose service type: ShieldQ Upload. You will then receive a profile token.
2. On your HTML page, create an iframe tag in the location where you want to place the upload form.
3. Set the source URL for the iFrame as:
https://docviewerapi.shieldq.com/FileUpload/Perform?profileToken=[ProfileToken]
Note: You must replace the [ProfileToken] value with the token provided to you in step #1.) For example, if your profile token is "1234," then the HTML code snippet for the iFrame would be
iframe src="https://docviewerapi.shieldq.com/FileUpload/Perform?profileToken=1234"
Optionally, you can customize the iFrame itself or additional parameters for the upload form. See the following examples:
iframe id="portalIframe" scrolling="no" frameborder="0" style="height: 380px; width: 100%;" src="https://docviewerapi03.shieldq.com/FileUpload/Perform?profileToken=1234&reference=my ref&cssurl=&language=en&successUrl=&failureUrl=">
iframe src="https://docviewerapi.shieldq.com/FileUpload/Perform?profileToken=4321" style="height: 360px; width: 630px; overflow: hidden;" frameborder="0">
Required and optional settings
Basic iFrame settings
Example:
iframe src="https://docviewerapi.shieldq.com/FileUpload/Perform?profileToken=1234"/
| Field | Description | Required |
| SRC URL | The SRC URL is a set URL that points to the service.
https://docviewerapi.shieldq.com/FileUpload/Perform?profileToken=The URL will include a value to identify the customer in the ShieldQ system |
Yes |
| profileToken | profileToken is the ShieldQ customer's unique ID, allocated by ShieldQ customer support. The uploaded documents will be routed to the user's queue according to the profileToken. | Yes |
Advanced iFrame settings (optional)
iFrame tag settings
You may set different types of properties in the iFrame tag settings, such as size, shape and other characteristics Some examples include:
| Field | Description | Required |
| style | Sets the iFrame's borders (e.g., height and width). Note: The IFrame container must be at least 320 pixels wide | No |
| frameborder | Sets the iFrame's border width | No |
| scrolling | Specifies if the iFrame should have scrollbars. | No |
For additional iFrame tag properties, please visit: http://www.w3schools.com/tags/tag_iframe.asp
iFrame source URL settings
You can define the upload document form’s look and feel in the iFrame’s source URL:
| Field | Description | Required |
| iframe id | Specifies a unique id for the element | No |
| reference | The reference is an ID for a specific document, set by the end user. Use the reference to easily find a document in the queue. | No |
| language | de - German en / leave empty - English es - Spanish fr - French he - Hebrew it - Italian ja - Japanese ro - Romanian ru - Russian zh - Chinese | No (English by default) |
| successUrl* | The URL to forward to the end user. The URL should be encoded. Click here for the url encoder tool. | no |
| failureUrl* | The URL to forward the end user in case of a failed upload. The URL should be encoded. Click here for the url encoder tool. | No |
| cssurl | URL to the CSS. The URL should be encoded. Click here for the url encoder tool. | No |
* Provide the failureUrl and successUrl pages if you want to handle the success/failure feedback to end customers yourself.
Get in touch. Have questions about ShieldQ’s secure document acceptance and management service? Contact our team.
