Custom Embedded Demo Forms

Setup demo functionality on CQG side

In order to allow your users to request demo logins for your application based on white-labeled CQG product or direct CQG API usage, the following information should be provided to the FCM Desk:

  • Application name.
  • Domain name (Site URL) where demo form will be embedded.
  • HTML template of email which will be sent to user once demo login is created.
  • Email address(es) that you'll want to cc/bcc (optional). Bcc email also can be configured during demo form code generation.
  • Mandatory SMS verification (optional). User will have to verify phone number with SMS code after first login to application in order to use it.
  • Duration (optional). Demo login lifespan in days. Default is 5 working days.

Then CQG will provide you Product ID, which should be used while demo form code snippet generation.

Demo Email HTML template format

It should contain the following placeholders for information about created demo login:

  1. %username – demo login username.
  2. %password – demo login password.
  3. %first_name – user’s first name.
  4. %last_name – user’s last name.
  5. %expiration_date – date until which demo login is alive.

Also send graphics, CQG will need to host them on cqg.com and change reference paths in the email

Generate demo form code

Before you can setup demo form on your site, you need to generate HTML code for embedding.

Proceed to https://demoform.cqg.com/generator/ and fill the following information:

  1. Brokerage name - your company name.
  2. Sales email to receive a copy of the demo requests - bcc email, once user requested demo using your form, email sent to user will be blindly copied to this email.
  3. URL where this form will be hosted on your domain.
  4. CQG Product ID - ID of your application provided by CQG on 1st step.
  5. Your demo request form title.

Then press 'Generate HTML'.

Once generated you will see 2 HTML code snippets:

  1. iFrame HTML - in case you don't need any customization of demo form. Just embed it to your site and it is done.
  2. Form HTML - demo form HTML code which can be customized with additional input fields and styles.

Embed code to your site

iFrame HTML

Example of generated code snippet you should embed into html page of your site:

<!-- Begin of demo request form. -->
<iframe frameborder="0" height="950" width="330" scrolling="no" src="https://sqa1demoform.sqa.cqg/form/index.html?brokerageName=Test&brokerageEmail=test%40test.com&brokerageUrl=https%3A%2F%2Ftest.com&productId=1111000&formTitle=Test"></iframe>
<!-- End of demo request form. -->

If you need to collect user's data in case of successful demo request, you can subscribe on special window message with 'CQGDemoForm' sender and 'demoRequested' topic.

See code example:

<script>
    function listener(event) {
        console.log("Received event from origin: " + event.origin);
        if (event.data
            && event.data.sender == "CQGDemoForm"
            && event.data.topic == "demoRequested") {
            console.log("Received user's input data from 'CQGDemoForm' with topic 'demoRequested':");
            console.log(event.data.userData);
        }
    }

    if (window.addEventListener) {
        window.addEventListener("message", listener);
    } else {
        // IE8
        window.attachEvent("onmessage", listener);
    }
</script>

Form HTML

Example of generated code snippet you should embed into html page of your site:

<!-- Begin of demo request form. -->
<div class="cqg-demo well" style="width: 330px;">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <h3 class="cqg-demo__title">Test</h3>
    <form class="cqg-demo__form" method="post">
        <div class="form-group">
            <img src="https://sqa1demoform.sqa.cqg/img/demoScreen.png" alt="Demo screen" style="max-width: 100%;">
        </div>
        <div class="cqg-demo__error alert alert-danger" style="display: none; white-space: pre-line;"></div>
        <div class="cqg-demo__success alert alert-success" style="display: none; white-space: pre-line;"></div>
        <input type="hidden" name="brokerageName" value="Test">
        <input type="hidden" name="brokerageEmail" value="test@test.com">
        <input type="hidden" name="brokerageUrl" value="https://test.com">
        <input type="hidden" name="productId" value="1111000">
        <div class="form-group">
            <label>First Name</label>
            <input type="text" class="form-control" name="userName" required="" maxlength="20">
        </div>
        <div class="form-group">
            <label>Last Name</label>
            <input type="text" class="form-control" name="userLastName" required="" maxlength="25">
        </div>
        <div class="form-group">
            <label>Email</label>
            <input type="email" class="form-control" name="userEmail" required="">
        </div>
        <div class="form-group">
            <label>Phone</label><span class="form-user-phone__description" style="display: none;"> (used for SMS verification)</span>
            <input type="tel" class="form-control" name="userPhone" required="">
        </div>
        <div class="cqg-demo__captcha form-group" data-sitekey="6LfFmA8UAAAAAKZv-_ve_i_o18hTf_dwYGfj5ywN" data-size="normal" data-theme="light" data-type="image"></div>
        <div class="form-group">
            <button type="submit" class="cqg-demo__submit btn btn-primary">Submit Demo Request</button>
        </div>
    </form>
    <p class="text-info">
        Instructions on how to download and activate your demo account will be sent to the email address that you provided above.
    </p>
    <script src="https://sqa1demoform.sqa.cqg/form/form.js"></script>
    <script>
        function initializeCqgDemoForm() {
            let demoForm = CQG.Demo.Form.initializeDemoForm(document.querySelector('.cqg-demo'));
        }
    </script>
    <script src="https://www.google.com/recaptcha/api.js?onload=initializeCqgDemoForm&amp;render=explicit" async="" defer=""></script>
</div>
<!-- End of demo request form. -->

If you need to collect user's data in case of successful demo request or add custom validation function which will be called before demo request send, you can use the following CQG demo form object methods:

/** Sets custom form validation function which will be called before form submitted.
 * @param callback - Callback function for the validation. Function will be called with one input parameter - object with the following structure:
 *    { firstName: string, lastName: string, email: string, phone: string }.
 * Returns string which will be shown as error message and prevent to submit the form data, if string not empty.
 */

setCustomValidator(callback)

/** Sets up a function that will be called whenever the specified event is delivered to the target.
 * @param eventType - A case-sensitive string representing the event type to listen for.
 * @param callback - Callback that receives a notification when an event of the specified name occurs.
 *    Function will be called with one input parameter - event object which contains the following fields:
 *       * type - event type;
 *       * userData (in case of 'demoRequested' event type) - object has the following structure:
 *            { firstName: string, lastName: string, email: string, phone: string}.
 * Now only 'demoRequested' event type is supported.
 */

addEventListener(eventType, callback)

/** Removes from the target an event listener previously registered with addEventListener().
 * @param eventType - A case-sensitive string representing the event type which you want to unsubscribe from.
 * @param callback - Callback function of the event handler to remove from the event target.
 */

removeEventListener(eventType, callback)

Instructions on how to download and activate your demo account will be sent to the email address that you provided above.

See code example:

<script>
    function initializeCqgDemoForm() {
        let demoForm = CQG.Demo.Form.initializeDemoForm(document.querySelector('.cqg-demo'));

        // Sample code.
        demoForm.addEventListener('demoRequested', (userData) => { console.log("Received 'demoRequested' event with user data:"); console.log(userData);});

        demoForm.setCustomValidator((userData) => {
            console.log("Custom validator handled with user data: ");
            console.log(userData);
            if (userData.firstName == "test") {
                return "Please enter your real name.";
            }
        });
    }
</script>