CPX Research Script Tag Documentation

CPX Research - Script Tag Documentation

We recommend integrating our script tag solution. Try to find a space on your website that is often seen by users to generate higher revenues (e.g. your side bar). This page explains how you can integrate the script tag. There are different designs to display our surveys.

Name	Screenshot
Design 1 - Full Content Widget	Screenshot
Design 2 - Multi Sidebar Widget	Screenshot
Design 3 - Single Sidebar Widget	Screenshot
Design 4/5 - Notification	Screenshot

Version :	v1.1
Last Update :	30-06-2020

Step 1

Please add the following Javascript Library to your source code. It is important that you add this code in the footer just before the </body>

															
															<script type="text/javascript" src="https://cdn.cpx-research.com/assets/js/script_tag_v2.0.js"></script>

Step 2

Please add the following configuration to your script:

1. Its important that you insert the following script tag right in front of the the Library from Step 1
2. You can use multiple of the designs on one page -> example full content element with sidebar element can be combined
3. If you want use Design 1 -> use const script1
4. If you want use Design 2 -> use const script2
5. If you want use Design 3 -> use const script3
5. If you want use Design 4/5 (Notfification) -> use const script4 or 5
7. In “style_config” you can change the colors of the element and adjust it to your needs
8. Important: script_config: [script1, script2, script3,script4,script5], in this area you must select which elements you use. When you use only script / design one use script_config: [script1], if you use more than one example script 1 and script 2 you can use script_config: [script1, script2],
9. Go to step 3 on this documentation

															
<script>
// How to use:
// 1. Add div(s) to html and give it an id
// 2. add this config script before the script tag
// 3. place the script on the bottom before the closing html tag

// All instances will take up the available space of its div
// If you are using the sidebar option, please specify a fixed height
// To debug, please only use 1 option

const script1 = {
    div_id: "fullscreen", // string // Entry point for the script
    theme_style: 1, // int // Theme: Select 1 for fullscreen, 2 for sidebar, 3 for sidebar single item
    order_by: 2, // int // Sort surveys (optional): Select 1 for best score (default), 2 for best money, 3 for best conversion rate
    limit_surveys: 7 // int // Limit the number of surveys displayed (optional). Default is 12.
};

const script2 = {
    div_id: "sidebar",
    theme_style: 1,
    order_by: 1,
};

const script3 = {
    div_id: "single",
    theme_style: 3,
    display_mode: 1 //(optional): 1 show text "no surveys", 2 make element invisible, 3 dont render the element
    // Display_mode option only affects the behaviour of the box (theme style 3) if no surveys are found
};

// NOTIFICATION LOGIC:
// no text, no link -> earn XX in XX Minutes, survey opening directly
// text and link -> own text + and own link
// text, but no link -> survey is opening directly
// no text, but link -> standard text + link


const script4 = {
    div_id: "notification",
    theme_style: 4,
    position: 5, //number // default 1 // 1 = top center, 2 = top left, 3 top right, 4 bottom left, 5 bottom right, 6 bottom center
    text: "",
    link: "",
    newtab: true
};

const script5 = {
    div_id: "notification2",
    theme_style: 4,
    position: 6, //number // default 1 // 1 = top center, 2 = top left, 3 top right, 4 bottom left, 5 bottom right, 6 bottom center
    text: "",
    link: "https://wall.cpx-research.com/index.php?app_id={your_app_id}&ext_user_id={ext_user_id}",
    newtab: true
};



const config = {
    general_config: {
        app_id: your_app_id, //number
        ext_user_id: "your_user_id", // string
         email: "", // string
         username: "", // string
       secure_hash: "", // string if enabled on publisher area
        subid_1: "", // string
        subid_2: "", // string
    },
    style_config: {
        text_color: "#2b2b2b", // string // hex, rgba, colorcode
        survey_box: {
            topbar_background_color: "#ffaf20", // string // hex, rgba, colorcode
            box_background_color: "white", // string // hex, rgba, colorcode
            rounded_borders: true, // boolean true || false
            stars_filled: "black", // string // hex, rgba, colorcode
        },
    },
    script_config: [script1, script2, script3,script4,script5], // Object Array
    debug: false, // boolean
     useIFrame: true, //boolean    
     iFramePosition: 1, // 1 right (default), 2 left
    functions: {
        no_surveys_available: () =>
        {
            console.log("no surveys available function here");
        }, // Function without parameter, NEVER USE window.alert... because of infinite loop
        count_new_surveys: (countsurveys) =>
        {
            console.log("count surveys function here, count:", countsurveys);
        },
        get_all_surveys: (surveys) =>
        {
            console.log("get all surveys function here, surveys: ", surveys);
        },
        get_transaction: (transactions) =>
        {
            console.log("transaction function here, transaction: ", transactions);
        }
        
        
  }  
  
  
  };

window.config = config;

</script>

Step 3

In last step you must say were you want show the element for the user on your page. For this you must add a “div tag” with an id

For the fullscreen Widget:

															
															<div style="max-width: 950px; margin: auto" id="fullscreen"></div>

For Single Sidebar Widget:

															
															<div style="width: 100%; height: 150px;" id="single"></div>

For Multi Sidebar Widget:

															
															<div id="sidebar" style="height: 469px"></div>

For Notification Widget 4/5:

															
															<div id="notification" style="height: 469px"></div>
															<div id="notification2" style="height: 469px"></div>