Alchemer

https://help.alchemer.com/help
Admin
Alchemer provides a suite of solutions for creating surveys, automating workflows, collecting...
Tokens:229,607
Snippets:3,810
Trust Score:10
Update:2 months ago
Show doc for...
Tokens:
Raw
### Initialize Timed Section Start

Source: https://help.alchemer.com/help/timed-quiz-or-test

Parses setup duration, sets start and completion timestamps in hidden values, and advances the survey.

```javascript
const initStartTimedSection = (setupTitle, startedTitle, completeByTitle) => {


    /***
     * parse the setup string
     *
     * s (string) Setup string in the form '3h 15m' or '3h:15m'
     * return (obj) in the form { hours: 3, minutes: 15 }
     */
    const parseSetup = (s) => {
      if (SHORTCUT_TIMER)
        return { hours: 0, minutes: 0.25 }
      const regex = /(\d+)h( *| *: *)(\d+)m/ // 3h 15m OR 3h:15m
      const aParsed = s.match(regex)
      assert(aParsed && aParsed.length === 4, `The setup string isn't in the form '3h 15m': ${s}`)
      const h = parseInt(aParsed[1])
      const m = parseInt(aParsed[3])
      if (LOG) console.log(`${h} : ${m}`)
      return { hours: h, minutes: m }
    }


    /***
     * main()
     */


    if (LOG) console.log("initStartTimedSection()")


    const setupObj       = parseSetup(getHvaByTitle(setupTitle).value)
    const elemStarted    = getHvaByTitle(startedTitle)
    const elemCompleteBy = getHvaByTitle(completeByTitle)


    // first time through survey, set the started and complete-by Hidden Values
    if (!elemStarted.value || elemStarted.value === 'not-set') {


      // set the started HVA
      let now = new Date()
      elemStarted.value = now.toString()
      if (LOG) console.log("elemStarted.value = ", elemStarted.value)


      // set the complete-by HVA
      const completeByDate = new Date(now.getTime() + (setupObj.hours * 60 + setupObj.minutes) * 60 * 1000)
      elemCompleteBy.value = completeByDate.toString()
      if (LOG) console.log("elemCompleteBy.value = ", elemCompleteBy.value)
    }


    // click Next
    document.getElementById("sg_NextButton").click()
  }
```

--------------------------------

### Get Intl.DateTimeFormat Settings

Source: https://help.alchemer.com/help/current-date-and-time

Generates configuration objects for date and time formatting based on the parsed setup object.

```javascript
const getDateSettings = (setupObj) => {
    return {
      timeZone: setupObj.timezone,
      month:    "2-digit",
      day:      "2-digit",
      year:     "numeric" // 4-digit year
    }
  }
```

```javascript
const getTimeSettings = (setupObj) => {
    return {
      timeZone: setupObj.timezone,
      hour:     "2-digit",
      minute:   "2-digit",
      second:   "2-digit",
      hour12:   setupObj.hours === '12h'
    }
  }
```

--------------------------------

### Apptentive URL Target Examples

Source: https://help.alchemer.com/help/alchemer-mobile-zendesk-integration-guide

Examples of the URL target configuration for single and multiple Apptentive app IDs.

```text
https://notify2.apptentive.com/integrations/apps/503ea820253aff102d9b1a1a/zendesk
```

```text
https://notify2.apptentive.com/integrations/apps/503ea820253aff102d9b1a1a,5b3ea826253aff102d9baa1f,5f501361403664788400000d/zendesk
```

--------------------------------

### Dynamic Custom Data Example

Source: https://help.alchemer.com/help/website-intercept

Example of passing dynamic site data as a custom attribute to the beacon.

```javascript
var items = someFunctionOnYourSite(); // however you would normally check for the current number of items in their cart when loading the page

sg_beacon('data','itemsInCart', items);
```

--------------------------------

### Desktop Interaction Example Links

Source: https://help.alchemer.com/help/style-your-survey

URLs demonstrating standard and one-at-a-time interaction styles for desktop survey respondents.

```text
http://survey.alchemer.com/s3/1877746/Default-Interactions
```

```text
http://survey.alchemer.com/s3/1877760/One-Question-at-a-Time
```

--------------------------------

### Main Execution Logic

Source: https://help.alchemer.com/help/current-date-and-time

Initializes the setup object and populates various survey fields with date and time information.

```javascript
  const browserDate = new Date()
  const setupObj = parseSetup()

  set(DATE_TITLE,                setupObj, getDate(setupObj, browserDate))
  set(TIME_TITLE,                setupObj, getTime(setupObj, browserDate))
  set(TIMESTAMP_TITLE,           setupObj, getDate(setupObj, browserDate) + ' ' + getTime(setupObj, browserDate))
  set(FILTERABLE_TIMESTAMP_TITLE,setupObj, getFilterableTimestamp(setupObj, browserDate))
  set(ISO_TIMESTAMP_TITLE,       setupObj, browserDate.toISOString())
  set(MILLISECONDS_TITLE,        setupObj, browserDate.getTime()) // getTime() is based on UTC and timezone independent
  set(DOW_TITLE,                 setupObj, getDow(setupObj, browserDate))
  set(HOUR_TITLE,                setupObj, getHour(setupObj, browserDate))
})
```

--------------------------------

### Get Slider Start Value

Source: https://help.alchemer.com/help/randomize-slider-leftright-labels

Retrieves the start value from the slider setup JSON.

```javascript
function getStartval(slider) {
  return getSliderSetupJSON(slider)["startval"]
}
```

--------------------------------

### Parse Setup Configuration

Source: https://help.alchemer.com/help/current-date-and-time

Parses a pipe-delimited string from a hidden survey value into a configuration object.

```javascript
const parseSetup = () => {
    const qid = getQidByTitle(SETUP_TITLE)
    assert(qid, `Missing element with title '${SETUP_TITLE}'`)
    const setupString = getElemByQid(qid).value

    const aParsed = setupString.match(/(.+)\|(.+)\|(.+)\|(.+)/)

    console.log("aParsed = \n", aParsed)
    assert(aParsed && aParsed.length === 5, "The current-setup string is not in expected format:\n\n'America/Los_Angeles | en-US | 24h | set-once'")

    const setup = {
      timezone: aParsed[1].trim(),
      locale:   aParsed[2].trim(),
      hours:    aParsed[3].trim(),
      set:      aParsed[4].trim()
    }

    assert(setup.hours === "12h" || setup.hours === "24h", `current-setup hours must be '12h' or '24h', not: ${setup.hours}`)
    assert(setup.set === "set-once" || setup.set === "set-always", `current-setup must be 'set-once' or 'set-always', not: ${setup.set}`)

    return setup
  }
```

--------------------------------

### Mobile Interaction Example Links

Source: https://help.alchemer.com/help/style-your-survey

URLs demonstrating standard and one-at-a-time interaction styles for mobile survey respondents.

```text
http://survey.alchemer.com/s3/1877746/Default-Interactions
```

```text
http://survey.alchemer.com/s3/1877760/Mobile-One-Page-at-a-Time
```

--------------------------------

### Initialize Alchemer Mobile SDK

Source: https://help.alchemer.com/help/alchemer-mobile-cordova-sdk-plugin-guide

Call this method when the device is ready to start the SDK. Do not use this in conjunction with registerWithLogs.

```javascript
onDeviceReady: function() {
  Apptentive.deviceReady(successCallback, failureCallback);
}
```

--------------------------------

### JSON Response Data Example

Source: https://help.alchemer.com/help/survey-webhook

Example structure of the JSON payload returned when using the 'Post current response data' option.

```json
[response] =>{
	"is_test_data": false,
	"session_id": "1487806491_58ae201be29097.19130318",
	"language": "English",
	"date_started": "2017-02-22 18:35:02 EST",
	"link_id": "123456",
	"url_variables": {
		"name": "jane"
	},
	"ip_address": "10.142.0.130",
	"referer": "http://survey.alchemer.com/s3/1234567/Webhook-Survey",
	"user_agent": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_11_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/56.0.2924.87 Safari/537.36",
	"response_time": 0,
	"data_quality": [],
	"survey_data": {
		"5": {
			"id": 5,
			"type": "RADIO",
			"question": "Gender",
			"section_id": 1,
			"answer": "male",
			"answer_id": 10001,
			"shown": true
		}
	}
}
```

--------------------------------

### Install Alchemer Mobile React Native Module

Source: https://help.alchemer.com/help/alchemer-mobile-react-native-integration-reference

Command to install the required npm package for the integration.

```bash
npm install apptentive-react-native --save
```

--------------------------------

### Example JSON API Response

Source: https://help.alchemer.com/help/use-webhook-action-to-prepopulate-questions

The structure of the JSON data returned by the sunrise-sunset API used in the example.

```json
{
  "status": "OK",
  "results": {
    **"sunrise": "8:05:30 AM",
    "sunset": "3:56:35 PM",**
    "solar_noon": "12:01:02 PM",
**    "day_length": "07:51:05",**
    "civil_twilight_begin": "7:25:25 AM",
    "civil_twilight_end": "4:36:39 PM",
    "nautical_twilight_begin": "6:42:18 AM",
    "nautical_twilight_end": "5:19:47 PM",
    "astronomical_twilight_begin": "6:01:32 AM",
    "astronomical_twilight_end": "6:00:33 PM"
  }
}
```

--------------------------------

### Format Date and Time Strings

Source: https://help.alchemer.com/help/current-date-and-time

Functions to format Date objects into strings using the provided setup configuration.

```javascript
const getDate = (setupObj, dt) => new Intl.DateTimeFormat(setupObj.locale, getDateSettings(setupObj)).format(dt)
```

```javascript
const getTime = (setupObj, dt) => {
    let s = new Intl.DateTimeFormat(setupObj.locale, getTimeSettings(setupObj)).format(dt)
    s = s.replace('24:', '00:') // fixup some LOCALE will use 24 for 12AM times
    return s
  }
```

```javascript
const getHour = (setupObj, dt) => {
    const options = {
      timeZone: setupObj.timezone,
      hour:     "numeric",
      hour12:   false
    }
    let s = new Intl.DateTimeFormat(setupObj.locale, options).format(dt)
    if (s === '24')
      s = '23'
    return s
  }
```

```javascript
const getDow = (setupObj, dt) => {
   const options = {
     timeZone: setupObj.timezone,
     weekday: 'short'
   }
   return new Intl.DateTimeFormat(setupObj.locale, options).format(dt)
  }
```

--------------------------------

### Install Alchemer Mobile Flutter Plugin

Source: https://help.alchemer.com/help/alchemer-mobile-sdk-flutter-plugin-guide

Use the Flutter CLI to add the dependency to your project.

```bash
$ flutter pub add apptentive_flutter
```

--------------------------------

### Install Alchemer Mobile Cordova Plugin

Source: https://help.alchemer.com/help/alchemer-mobile-cordova-sdk-plugin-guide

Use this command to install the plugin via NPM, providing your unique Android and iOS app keys and signatures.

```bash
cordova plugin add apptentive-cordova --variable ANDROID_APP_KEY="YOUR_ANDROID_KEY" --variable ANDROID_APP_SIGNATURE="YOUR_ANDROID_SIGNATURE" --variable IOS_APP_KEY="YOUR_IOS_KEY" --variable IOS_APP_SIGNATURE="YOUR_IOS_SIGNATURE"
```

--------------------------------

### Navigate to specific survey page by SKU

Source: https://help.alchemer.com/help/survey-links-url-variable-tricks

Directs respondents to a specific page SKU; replace 'start' in the default navigation parameter.

```text
sg_navigate=start
```

--------------------------------

### Set a Session Cookie

Source: https://help.alchemer.com/help/website-intercept

Example of setting a document cookie for use in intercept logic.

```javascript
document.cookie =
 'sgcookie=testcookie; expires=Thu, 26 July 2014 23:42:00 UTC; path=/'
```

--------------------------------

### Standard HTML Hyperlink

Source: https://help.alchemer.com/help/using-merge-codes-inside-html

A basic example of an HTML anchor tag without any merge codes.

```html
<a href="http://www.example.com">Visit Alchemer</a>
```

--------------------------------

### Example Response for Response Received Notification

Source: https://help.alchemer.com/help/account-webhooks

A sample JSON payload structure returned by the On Response Received webhook.

```json
{
  "webhook_name": "On Response Received",
  "data": {
    "is_test": false,
    "session_id": "1591213853_5ed7ff1d3b37d9.13571736",
    "account_id": 33333,
    "survey_id": 1264838,
    "response_status": "Complete",
    "url_variables": {
      "sguid": "bG0PQDHDyDDhEGvl"
    },
    "survey_link": {
      "id": 8004308,
      "type": "link",
      "name": "Default Link",
      "url": "www.alchemer.com/s3/4835933/Survey"
    },
    "contact": {
      "Email": "test@email.com",
      "First Name": "John",
      "Last Name": "Smith",
      "Organization": "Alchemer",
      "Division": "",
      "Department": "",
      "Team": "Sales",
      "Group": "",
      "Role": "Account Manager",
      "Phone (Home)": "",
      "Phone (Fax)": "",
      "Phone (Work)": "",
      "Address": "123 Main St",
      "Suite/Apt": "333",
      "City": "Boulder",
      "State/Region": "CO",
      "Country": "United States",
      "Postal Code": "12345",
      "Job Title": "",
      "Website": "",
      "Region": "CO",
      "Invite Custom 1": "1234567",
      "Invite Custom 2": "",
      "Invite Custom 3": "",
      "Invite Custom 4": "",
      "Invite Custom 5": "",
      "Invite Custom 6": "",
      "Invite Custom 7": "",
      "Invite Custom 8": "",
      "Invite Custom 9": "",
      "Invite Custom 10": ""
    }
  }
}
```

--------------------------------

### Install Alchemer Mobile Cordova Plugin with Configuration

Source: https://help.alchemer.com/help/alchemer-mobile-cordova-sdk-plugin-guide

Use this command to add the plugin to your Cordova project while defining required keys and optional configuration variables.

```bash
cordova plugin add apptentive-cordova --variable ANDROID_APP_KEY="YOUR_ANDROID_KEY" --variable ANDROID_APP_SIGNATURE="YOUR_ANDROID_SIGNATURE" --variable IOS_APP_KEY="YOUR_IOS_KEY" --variable IOS_APP_SIGNATURE="YOUR_IOS_SIGNATURE" --variable ANDROID_LOG_LEVEL=info --variable ANDROID_INHERIT_APP_THEME=true --variable ANDROID_USES_DEVICE_ENCRYPTION=false --variable ANDROID_SANITIZE_LOG_MESSAGES=true --variable IOS_SANITIZE_LOG_MESSAGES=true --variable ANDROID_CUSTOM_APP_STORE_URL=" " --variable ANDROID_RATING_INTERACTION_THROTTLE_LENGTH="604800000"
```

--------------------------------

### Embed Audio with Autoplay

Source: https://help.alchemer.com/help/embed-audio-video-documents

Use the autoplay attribute within the audio tag to start playback automatically when the page loads. Note that this will also trigger playback in the survey Build tab.

```html
<audio controls autoplay>
 <source src="http://link/to/your.file" type="audio/mpeg">
 <embed height="50" width="100" src="http://link/to/your.file">
</audio>
```

--------------------------------

### Initialize the Alchemer Digital SDK

Source: https://help.alchemer.com/help/alchemer-mobile-ios-integration-reference

Import the ApptentiveKit module and engage the SDK using the shared instance to track app launch events.

```swift
import ApptentiveKit

Apptentive.shared.engage(event: "app.launch")
```

--------------------------------

### Initialize Autofill Execution

Source: https://help.alchemer.com/help/autofill-tool

Main entry point that triggers the autofill process either via a bookmarklet or on DOMContentLoaded.

```javascript
/***
 * main()
 */

if (BOOKMARKLET) {
  const questionElems = getQuestionElems()
  console.log("\n---------------------\nquestionElems = ", questionElems, '\n^^^^^^^^^^^^^^^^^^^^^^\n')
  autofill(questionElems)
}
else {
  document.addEventListener("DOMContentLoaded", function() {
    const questionElems = getQuestionElems()
    console.log("\n---------------------\nquestionElems = ", questionElems, '\n^^^^^^^^^^^^^^^^^^^^^^\n')
    autofill(questionElems)
  })
}
})()
```

--------------------------------

### Survey Notification JSON Response

Source: https://help.alchemer.com/help/account-webhooks

Example payload structure returned by survey-related webhooks.

```json
{
  "webhook_name": "On Survey Update",
  "trigger_context": {
    "type": "survey",
    "id": 1234567
  },
  "data": {
    "user": {
      "id": 12345,
      "name": "John Smith",
      "email": "john.smith@email.com"
    },
    "survey_id": 1234567,
    "survey_title": "My New Survey",
    "survey_status": "Launched",
    "survey_folder": [],
    "survey_theme": {
      "id": "68551",
      "theme": "My Custom Theme"
    },
    "teams": {
      "252692": {
        "name": "Team 1",
        "id": 252692
      }
    },
    "account": {
      "id": 33333,
      "name": "Alchemer",
      "parent_id": null
    }
  }
}
```

--------------------------------

### Initialize Alchemer Mobile SDK with Logging

Source: https://help.alchemer.com/help/alchemer-mobile-cordova-sdk-plugin-guide

Use this method to initialize the SDK while specifying a log level for debugging. Supported levels include 'verbose' and 'info'.

```javascript
onDeviceReady: function() {
  Apptentive.registerWithLogs(successCallback, failureCallback, "verbose");
}
```

--------------------------------

### Register SDK with Configuration

Source: https://help.alchemer.com/help/alchemer-mobile-sdk-flutter-plugin-guide

Create an ApptentiveConfiguration object and register the SDK.

```dart
Future<void> initializeApptentive() async {
  ...
  final ApptentiveConfiguration configuration = ApptentiveConfiguration(
      apptentiveKey: apptentiveKey,
      apptentiveSignature: apptentiveSignature,
      // Set your log level here
      logLevel: LogLevel.debug
  );
  bool successful = await ApptentiveFlutter.register(configuration);
}
```

--------------------------------

### Initialize mParticle Current User

Source: https://help.alchemer.com/help/alchemer-mobile-mparticle-integration-guide-ios

Retrieve the current user instance from the mParticle SDK to begin setting attributes.

```kotlin
val currentUser = MParticle.getInstance()!!.Identity().currentUser
```

--------------------------------

### Get Survey Question Properties

Source: https://help.alchemer.com/help/autofill-tool

Retrieves a specific property from the survey object for a given question ID.

```javascript
const getProperty = (qid, propertyName, isInt) => {
  const val = getSGAPI().survey.surveyObject.questions[qid].properties[propertyName]
  if (isInt)
    return parseInt(val) || 0
  return val || ''
 }
```

--------------------------------

### Initialize mParticle Current User

Source: https://help.alchemer.com/help/alchemer-mobile-mparticle-integration-guide-android

Retrieve the current user instance from the mParticle SDK to begin managing attributes.

```kotlin
val currentUser = MParticle.getInstance().Identity().currentUser
```

--------------------------------

### Initialize Slider Swapping

Source: https://help.alchemer.com/help/randomize-slider-leftright-labels

Sets up the DOM listener and defines the loop to randomly swap slider displays.

```javascript
document.addEventListener("DOMContentLoaded", function() {

  let isSwapped = [] // boolean array of swap status for all sliders on page
  let sliders = document.getElementsByClassName("sg-type-slider")


  /* -----------------------------------
     randomly swap slider displays
     ----------------------------------- */
  function swapRandomSliders() {


    // go through all sliders
    for (let sliderIdx = 0; sliderIdx < sliders.length; sliderIdx++) {

```

--------------------------------

### Generate Snowflake Key Pair

Source: https://help.alchemer.com/help/snowflake-authentication

Commands to create a private key and its corresponding public key on a local machine.

```bash
openssl genrsa -out private_key.pem 2048
```

```bash
openssl rsa -in private_key.pem -pubout -out public_key.pem
```

--------------------------------

### Survey Counter Merge Code Usage

Source: https://help.alchemer.com/help/response-id-merge-code

Examples of the survey counter merge code with various parameters for customization.

```text
[survey("counter")]
```

```text
[survey("counter"), safer="true"]
```

```text
[survey("counter"), startat="1000"]
```

```text
[survey("counter"), name="secondCounter"]
```

--------------------------------

### Navigate to Desktop in Windows Command Prompt

Source: https://help.alchemer.com/help/encode-an-excel-file-to-utf-8-or-utf-16

Change the current working directory to the desktop using the Windows file path structure.

```cmd
 cd C:\Users\(username)\Desktop
```

--------------------------------

### Initialize Timed Section End

Source: https://help.alchemer.com/help/timed-quiz-or-test

Placeholder function for initializing logic on the page following a timed section.

```javascript
const initEndTimedSection = (startedString, completedTitle, timeSpentTitle) => {
    if (LOG) console.log("initEndTimedSection()")
```

--------------------------------

### Navigate to Desktop in Terminal

Source: https://help.alchemer.com/help/encode-an-excel-file-to-utf-8-or-utf-16

Change the current working directory to the desktop to locate the target file.

```bash
 cd desktop
```

--------------------------------

### Change Next Button Text

Source: https://help.alchemer.com/help/timed-quiz-or-test

Updates the survey's Next button label to 'Start Exam' on the final introductory page.

```javascript
document.addEventListener("DOMContentLoaded", function() {
  document.querySelector('#sg_NextButton').value = "Start Exam" 
})
```

--------------------------------

### Define Textbox Question

Source: https://help.alchemer.com/help/import-from-word

Create a short open-ended question by placing underscores on the line immediately following the question title.

```text
What is your age?
____
```

--------------------------------

### Retrieve and Calculate Values with Javascript

Source: https://help.alchemer.com/help/basic-math

Individual code segments demonstrating how to fetch values from previous or current pages, perform arithmetic, and save results.

```javascript
// get the numeric reporting value for a question on an _earlier_ page using a merge code  
const numberOfDays = parseInt(`**[question("value"), id="35"]** `) || 0
```

```javascript
// get the numeric value for a question on _this_ page based on its question ID  
const costPerDay = parseFloat(**getElemByQid(39).value**) || 0
```

```javascript
// perform some math!  
let totalCost = numberOfDays * costPerDay
```

```javascript
// save the value rounded to two decimal digits (important since floating point math in Javascript is base-2)  
**getElemByQid(40).value** = totalCost.toFixed(2)
```

--------------------------------

### Define Descriptive Text

Source: https://help.alchemer.com/help/import-from-word

Type text on its own line to create descriptive fields. Use single line breaks for the same field and blank lines to start a new field.

```text
This is an introductory paragraph.
By doing a single line break, these are the same descriptive text field.

By adding a blank line above, this became a new field & may include **HTML** code.
```

--------------------------------

### Register Apptentive Listeners and Initialization

Source: https://help.alchemer.com/help/alchemer-mobile-cordova-sdk-plugin-guide

Initializes the SDK and registers listeners for unread messages within the device ready event.

```javascript
const successCallback = () => {
  console.log('Apptentive device ready');
};

const failureCallback = () => {
  console.error('Apptentive device not ready');
}

const unreadMessagesListenerSuccess = (count) => {
  console.log("UnreadMessages: " + count);
};

const unreadMessagesListenerFailure = (errorMessage) => {
  console.log("Error: " + errorMessage);
};

document.addEventListener('deviceready', () => {
    Apptentive.registerWithLogs(successCallback, failureCallback, "verbose");

    Apptentive.addUnreadMessagesListener(unreadMessagesListenerSuccess, unreadMessagesListenerFailure);
});
```

--------------------------------

### Manage Slider Style and Swapping

Source: https://help.alchemer.com/help/randomize-slider-leftright-labels

Functions to get, set, and swap the CSS style (left/bottom) of a slider handle. The swap function includes a delay to account for dynamic UI updates.

```javascript
function getStyleLeft(slider) {
  let value = null
  if (getHandleElem(slider).getAttribute("style").startsWith("left"))
    value = getHandleElem(slider).style.left
  else
    value = getHandleElem(slider).style.bottom
  return parseFloat(value, 10).toFixed(1)
}
function setStyleLeft(slider, newValue) {
  if (getHandleElem(slider).getAttribute("style").startsWith("left"))
    getHandleElem(slider).style.left = newValue + "%"
  else
    getHandleElem(slider).style.bottom = newValue + "%"
}
function swapStyleLeft(slider) {
  let newValue = 100 - getStyleLeft(slider)
  setTimeout(function() { setStyleLeft(slider, newValue) }, 400)
  setTimeout(function() { setStyleLeft(slider, newValue) }, 1000) // ensure it worked!
}
```

--------------------------------

### ApptentiveFlutter.showMessageCenter

Source: https://help.alchemer.com/help/alchemer-mobile-sdk-flutter-plugin-guide

Launches the Message Center UI to allow customers to contact support or provide feedback.

```APIDOC
## ApptentiveFlutter.showMessageCenter()

### Description
Displays the Message Center interface to the user, enabling them to send feedback or start a conversation.
```

--------------------------------

### Display Survey Quotas via Webhook

Source: https://help.alchemer.com/help/share-status-of-quotas-from-a-survey

This script retrieves quota data from a Webhook Action, formats it into a table, and displays it on the page. Ensure the Webhook Action is configured to 'Display it' and set to 'Get' method.

```javascript
/* Alchemer v01

   Display the quotas returned from a Webhook Action 

   Documentation and updates: https://help.alchemer.com/help/share-status-of-quotas-from-a-survey
*/

document.addEventListener("DOMContentLoaded", function() {

  // * * * * * * * * * * * * * *
  // * no changes needed below *
  // * * * * * * * * * * * * * *

  const LOG = true

  /**
   * Helper to display error dialog and throw new Error
   */
  const assert = (bool, msg) => {
    if (!bool)
      throw new Error(msg)
  }
   
  /***
   * Sort two strings in alpha order
   */
  const alphaSortFn = (a, b) => a.localeCompare(b)

  /***
   * Sort two quotas in alpha order
   */
  const quotaSortFn = (a, b) => alphaSortFn(a.name, b.name)

  /***
   * Parse all quotas from webhook call.
   *
   * return (quota array) array of quota objects with format:
           {
             "id": "2600",
             "name": "fill-Male-A",
             "description": "",
             "responses": "0",
             "limit": "100",
             "distributed": "false"
            }
   */
  const getAllQuotas = () => {

    // get webhook call result elem
    const webhookResultElem = document.querySelector('.sg-http-content')

    // test
    if (!webhookResultElem)
      throw new Error("Can't find Webhook data. Check that Webhook Action is on this page and has 'Display it' selected")

    if (LOG) console.log("\n---- Raw return from webhook ----\n" + webhookResultElem.innerText + "\n---- ^^^^^^^^^ ----\n")
    
    const quotasJSON = webhookResultElem.innerText

    if (!quotasJSON)
      throw new Error("Webhook call failed with no data returned")

    const parsed = JSON.parse(quotasJSON)

    // check webhook return 
    if (!parsed.result_ok) {
      if (parsed.code === 403 && parsed.message.startsWith('POST calls are not allowed'))
        throw new Error("Webhook call failed, check that the Webhook Action's Method is set to 'Get'")  
      throw new Error("Webhook call failed, check that you entered the correct datacenter, API token, and Survey ID: " + parsed.code + ' - ' + parsed.message)
    }
    if (LOG) console.log("getAllQuotas() = ", parsed.quotas)
    if (!parsed.quotas.length)
      throw new Error("No quotas were found, check that Webhook is referencing the correct survey ID")

    return parsed.quotas
  }

  /***
   * Get an index for a continuous value.
   *
   * Example:
   *     ['green','orange','red'][getIndex(0.2, 1, 3)] // 'green'
   *
   * Example:
   *     getIndex(-25, 100, 3) // 0
   *     getIndex(0,   100, 3) // 0
   *     getIndex(40,  100, 3) // 1
   *     getIndex(80,  100, 3) // 2
   *     getIndex(100, 100, 3) // 2
   *     getIndex(200, 100, 3) // 2
   *
   * x (int/float) the continuous value
   * max (int/float) index will be calculated based on 0-max, however actual x value can be outside this range
   * numIndexes (int) the return will be in the range 0-(numIndexes - 1) 
   */
  const getIndex = (x, max , numIndexes) => {
    const index = x / (max / numIndexes)
    // min/max to keep it in the range of 0 to (numIndexes-1)
    return Math.max(
             Math.min(
               Math.floor(index), 
               (numIndexes - 1)),
             0)
  }

  /***
   * Get an HTML formatted display for the % quota filled column
   * 
   * responses (int) number of responses received
   * limit (int) the quoto limit
   * return (html text) calculated percent with color formatting for red, orange, green
   */
  const formatPercentFilled = (responses, limit) => {
    const percent = responses / limit * 100
    const color = ['red', 'orange', 'green'][getIndex(percent, 100, 3)] 
    return `<span style="color:${color};">${(percent).toFixed(0)}%</span>`
  }

  /***
   * Show quotas 
   */
  const showQuotas = () => {

    let quotas = getAllQuotas()

    // log
    if (LOG) {
      console.log("quotas = ")
      console.log(
        quotas.map((quota) => `  ${quota.name} - ${quota.responses}` )
        .sort(alphaSortFn)
        .join('\n'))
    }

    // table inside a div that provides css layout of a Text element 
    let tableHTML =
        '<div class="sg-question sg-type-instruction">'
      +   '<table style="margin-left: auto;  margin-right: auto;">'
      +     `<tr><th>Quota</th><th>Current</th><th>Limit</th><th>% filled</th></tr>`
      +     quotas
               .sort(quotaSortFn)
               .map(quota => `<tr><td>${quota.name}</td><td>${quota.responses}</td><td>${quota.limit}</td><td>${formatPercentFilled(quota.responses, quota.limit)}</td></tr>`)
               .join('')
      +   '</table>'
      +   '</br>'
      + '</div>'

    let elemWebhook = document.querySelector('.sg-http-content')
    elemWebhook.insertAdjacentHTML('afterend', tableHTML);
   }

  /**
   * main()
   */
  try {
    showQuotas()
  }
  catch (err) {
    console.error("ERROR.message ", err.message)
    console.error("ERROR ", err)
    alert("Javascript error: " + err.message)
  }
})
```

--------------------------------

### Initialize SDK in initState

Source: https://help.alchemer.com/help/alchemer-mobile-sdk-flutter-plugin-guide

Trigger the initialization function within the app's state lifecycle.

```dart
class _MyAppState extends State<MyApp> {
  @override
  void initState() {
    super.initState();
    // Initialize Apptentive on app startup
    // This is a function you will create in the next section
    initializeApptentive();
  }
}
```

--------------------------------

### Configure Zendesk URL Target

Source: https://help.alchemer.com/help/alchemer-mobile-zendesk-integration-guide

The base URL for the Apptentive integration target in Zendesk.

```text
https://notify2.apptentive.com/integrations/apps/APPID1,APPID2/zendesk
```

--------------------------------

### Apptentive.presentMessageCenter()

Source: https://help.alchemer.com/help/alchemer-mobile-react-native-integration-reference

Opens the Message Center interface within the application.

```APIDOC
## Apptentive.presentMessageCenter()

### Description
Displays the Message Center UI, allowing users to view message history and send feedback.

### Usage
```javascript
Apptentive.presentMessageCenter();
```
```

--------------------------------

### Configure Android Gradle Classpath

Source: https://help.alchemer.com/help/alchemer-mobile-sdk-flutter-plugin-guide

Required Gradle version and classpath configuration for Android projects.

```gradle
classpath 'com.android.tools.build:gradle:7.0.0'
```

--------------------------------

### Platform-Specific Key Configuration

Source: https://help.alchemer.com/help/alchemer-mobile-sdk-flutter-plugin-guide

Detect the operating system to assign the correct API keys and signatures.

```dart
import 'dart:io' show Platform;

...

Future<void> initializeApptentive() async {
    final String apptentiveKey;
    final String apptentiveSignature;
    if (Platform.isAndroid) {
      apptentiveKey = "<YOUR_ANDROID_KEY>";
      apptentiveSignature = "<YOUR_ANDROID_SIGNATURE>";
    } else if (Platform.isIOS) {
      apptentiveKey = "<YOUR_IOS_KEY>";
      apptentiveSignature = "<YOUR_IOS_SIGNATURE>";
    } else {
      ...
    }
    ...
}
```

--------------------------------

### Initialize Alchemer Beacon

Source: https://help.alchemer.com/help/website-intercept

Standard beacon initialization snippet required on every page.

```javascript
(function(d,e,j,h,f,c,b){d.AlchemerBeacon=f;d[f]=d[f]||function(){(d[f].q=d[f].q||[]).push(arguments)};c=e.createElement(j),b=e.getElementsByTagName(j)[0];c.async=1;c.src=h;b.parentNode.insertBefore(c,b)})(window,document,'script','//d2bnxibecyz4h5.cloudfront.net/runtimejs/intercept/intercept.js','sg_beacon');

sg_beacon('init','Mjg1MjcwLTRFOTMxQkRCMzMxRDRGRjBBMjc0RUU0MDAxMDFCNEU2');
```

--------------------------------

### Randomize Pages or Questions with JavaScript

Source: https://help.alchemer.com/help/show-random-x-pages-basic

Configure the VALUES array and NUMBER_TO_SHOW constant to define the selection pool and quantity. Ensure the SAVE_VALUES_TO_QID matches the ID of your Hidden Value Action question.

```javascript
/* Alchemer v01

   Setup for Page, Page Group, or Question Randomization
*/

document.addEventListener("DOMContentLoaded", function() {
  
  // The values to choose from
  const VALUES = [
    "Concept A",
    "Concept B",
    "Concept C",
    "Concept D",
  ]
  
  // how many random values to choose
  const NUMBER_TO_SHOW = 2
   
  // The Hidden Value Action question ID to save the randomly chosen values which
  //   in list separated by vertical bars
  const SAVE_VALUES_TO_QID = 18

  // * * * * * * * * * * * * * * 
  // * no changes needed below *
  // * * * * * * * * * * * * * * 
  
  const LOG = true

  /***
   * Test boolean value, alert() and throw Error if it's false
   *
   * bool {t/f} value to test 
   * msg {string} message to alert and throw in new Error
   */
  const assert = (bool, msg) => {
    if (!bool) {
      console.error(msg)
      alert(msg)
      throw new Error(msg)
      }
  }

  /***
   * Get an element based on its Question ID 
   *
   * qid {integer/string} question ID 
   * section = "element" {string} the final section of the element id
   * return {element} looks for id's in the form: "sgE-1234567-12-123-element"
   */
  const getElemByQid = (qid, section = "element") => {
    const id = "sgE-" + SGAPI.survey.surveyObject.id + "-" + SGAPI.survey.pageId + "-" + qid + "-" + section
    const elem = document.getElementById(id)
    assert(elem, "Javascript: can't find element with id = " + id + ", section = " + section)
    return elem
  }
    
  /***
   * Check if random values have already been saved when page was previously shown
   *
   * return {t/f} 
   */
  const haveValuesBeenSaved = () => {
    savedValues = getElemByQid(SAVE_VALUES_TO_QID).value
    return savedValues && savedValues !== 'not-set'
  }
    
  /**
   * Shuffle / randomize an array in place
   *
   * array {array} - array is mutated
   * return {array} - shuffled array
   */
  function shuffle(array) {

    // Knuth shuffle (https://stackoverflow.com/questions/2450954/how-to-randomize-shuffle-a-javascript-array)

    var currentIndex = array.length, temporaryValue, randomIndex;

    // While there remain elements to shuffle...
    while (0 !== currentIndex) {

      // Pick a remaining element...
      randomIndex = Math.floor(Math.random() * currentIndex);
      currentIndex -= 1;

      // And swap it with the current element.
      temporaryValue = array[currentIndex];
      array[currentIndex] = array[randomIndex];
      array[randomIndex] = temporaryValue;
    }

    return array;
  }
    
  /***
   * Get random values
   *
   * values {array of string} the values to select from
   * numberToShow {int} how many values to randomly choose
   * return {array of string} array of the randomly chosen values
   */
  const getRandomValues = (values, numberToShow) => {
    values = shuffle(values)
    const retVal = []
    for (let i = 0; i < numberToShow && i < values.length; i++)
      retVal.push(values[i])
    return retVal
  }
  
  /***
   * Save randomized values
   *
   * qid {int} question id
   * values {array of string} the values to save
   */
  const saveValues = (qid, values) => {
    getElemByQid(qid).value = 
      values.sort((a, b) => 
        a.localeCompare(b))
        .join('|')
    if (LOG) console.log("saving values to show = ", getElemByQid(qid).value)
  }

  /**
   * main()
   */

  if (!haveValuesBeenSaved()) {
    const values = getRandomValues(VALUES, NUMBER_TO_SHOW)
    saveValues(SAVE_VALUES_TO_QID, values)
  } else {
    if (LOG) console.log("random values already saved = ", getElemByQid(SAVE_VALUES_TO_QID).value)
  }
})
```

--------------------------------

### Alchemer Autofill Configuration

Source: https://help.alchemer.com/help/autofill-tool

Initial configuration block for the autofill script. Set BOOKMARKLET to true for bookmark usage or false for survey header injection.

```javascript
(function() {
const LOG = true
const BOOKMARKLET = false // true when setting up as bookmarlet, false to run in the survey Style > HEADER
```

--------------------------------

### Register Alchemer Mobile SDK in App.js

Source: https://help.alchemer.com/help/alchemer-mobile-react-native-integration-reference

Initialize the SDK using platform-specific credentials within a class-based component.

```javascript
import { Apptentive, ApptentiveConfiguration } from "apptentive-react-native";

const credentials = Platform.select({
  ios: {
    apptentiveKey: "<YOUR_IOS_APP_KEY>",
    apptentiveSignature: "<YOUR_IOS_APP_SIGNATURE>"
  },
  android: {
    apptentiveKey: "<YOUR_ANDROID_APP_KEY>",
    apptentiveSignature: "<YOUR_ANDROID_APP_SIGNATURE>"
  }
});

export default class App extends Component {
  componentDidMount() {
    const configuration = new ApptentiveConfiguration(
      credentials.apptentiveKey,
      credentials.apptentiveSignature
    );
    // Override log level for debugging (optional)
    configuration.logLevel = 'verbose';
    Apptentive.register(configuration);
  }
}
```

--------------------------------

### File Upload Question Formatting

Source: https://help.alchemer.com/help/import-from-word

Creates a file upload question by specifying the title followed by the ::file upload:: tag.

```text
Please upload your resume.
::file upload::
```

--------------------------------

### Complete Javascript Action for Basic Math

Source: https://help.alchemer.com/help/basic-math

A full implementation of a Javascript Action that waits for form submission to calculate and store survey values.

```javascript
/* Alchemer example of performing basic math in a survey

   Documentation and updates: https://help.alchemer.com/help/basic-math
*/

document.addEventListener("DOMContentLoaded", function() {

  /***
   * Test boolean value, alert() and throw Error if it's false
   *
   * bool (t/f) value to test 
   * msg (string) message to alert and throw in new Error
   */
  const assert = (bool, msg) => {
    if (!bool) {
      console.error(msg)
      alert(msg)
      throw new Error(msg)
      }
  }

  /***
   * Get an element based on its Question ID 
   *
   * qid (integer/string) question ID 
   * section = "element" (string) the final section of the element id
   * return (element) looks for id's in the form: "sgE-1234567-12-123-element"
   */
  const getElemByQid = (qid, section = "element") => {
    const id = "sgE-" + SGAPI.survey.surveyObject.id + "-" + SGAPI.survey.pageId + "-" + qid + "-" + section
    const elem = document.getElementById(id)
    assert(elem, "Javascript: can't find element with id = " + id + ", section = " + section)
    return elem
  }

  /**
   * main()
   */

  // wait for the Back / Next button to be clicked to submit the page
  document.forms[0].addEventListener("submit", function() {
  
    // get the numeric reporting value for a question on an earlier page using a merge code
    const numberOfDays = parseInt(`[question("value"), id="35"]`) || 0
    
    // get the numeric value for a question on this page based on its question ID
    const costPerDay   = parseFloat(getElemByQid(39).value) || 0
    
    // perform some math
    const totalCost = numberOfDays * costPerDay
    
    // save the value rounded to two decimal digits (important since floating point math in Javascript is base-2)
    getElemByQid(40).value = totalCost.toFixed(2)
    
  })
})
```

--------------------------------

### Check Availability and Open Message Center

Source: https://help.alchemer.com/help/alchemer-mobile-mparticle-integration-guide-android

Verify if the Alchemer Mobile kit is active and the Message Center is available before displaying a feedback button.

```kotlin
override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    setContentView(R.layout.activity_main)
    val button: Button = findViewById(R.id.feedback_button)

    //Check whether Message Center is available
    val messageCenterEnabled = 
       Mpartile.getInstance()?.isKitActive(MParticle.ServiceProviders.APPTENTIVE) 
       == true && **Apptentive.canShowMessageCenter()**

    // Show or hide the feedback button
    feedbackButton.isVisible = messageCenterEnabled

    // Open Message Center when the feedback button is clicked
    feedbackButton.setOnClickListener { 
        Apptentive.showMessageCenter()
    }
}
```

```java
@Override
protected void onCreate(Bundle savedInstanceState) {
  super.onCreate(savedInstanceState);
  setContentView(R.layout.activity_main);
  Button feedbackButton = findViewById(R.id.feedback_button);

  // Check whether Message Center is available
  boolean messageCenterEnabled = 
    MParticle.getInstance().isProviderActive(ServiceProviders.APPTENTIVE)
    && **Apptentive.canShowMessageCenter()**;

  // Show or hide the feedback button
  if (messageCenterEnabled) {
    feedbackButton.setVisibility(View.VISIBLE);
  } else {
    feedbackButton.setVisibility(View.GONE);
  }

  // Open Message Center when the feedback button is clicked
  feedbackButton.setOnClickListener(new View.OnClickListener() {
    @Override
    public void onClick(View view) {
      **Apptentive.showMessageCenter();**
    }
  });
}
```

--------------------------------

### Embed Audio with HTML5

Source: https://help.alchemer.com/help/embed-audio-video-documents

Use this HTML snippet within a Text/Instructions element to embed an audio file with a fallback for older browsers.

```html
<audio controls>
 <source src="http://link/to/your.file" type="audio/mpeg">
 <embed height="50" width="100" src="http://link/to/your.file">
</audio>
```

--------------------------------

### Sorting and Formatting Utilities

Source: https://help.alchemer.com/help/show-random-x-pages-or-questions-limit-to-awarre-of-conceptsbrands

Helper functions for prioritizing asterisk-marked strings, removing trailing asterisks, and performing alphabetical sorting.

```javascript
const prioritizeAsteriskFn = (a, b) => {
    if (a.slice(-1) === '*' && b.slice(-1) === '*')
      return 0
    if (a.slice(-1) === '*')
      return -1
    if (b.slice(-1) === '*')
      return 1
    return 0
  }

  /***
   * remove trailing asterisk
  */
  const removeTrailingAsteriskFn = (s) => {
    if (s.slice(-1) === '*')
      return s.slice(0, -1)
    return s
  }  

  /***
   * Sort two strings in alpha order
   */
  const alphaSortFn = (a, b) =>  a.localeCompare(b)
```

--------------------------------

### Define Checkbox Question

Source: https://help.alchemer.com/help/import-from-word

Create multiple-choice questions using brackets. A shorthand version allows brackets only on the first option.

```text
Please select your race (select all that apply):
[]Asian/Pacific Islander
[]Black/African-American
[]Caucasian
[]Hispanic
[]Native American/Alaska Native
[]Other/Multi-Racial
[]Decline to Respond
```

```text
Select all of the airlines you have flown in the past 3 months.
[ ] Southwest
United
Delta
American
```

--------------------------------

### Add Custom Data to Beacon

Source: https://help.alchemer.com/help/website-intercept

Pass custom key-value pairs to the beacon immediately after initialization.

```javascript
sg_beacon('data','myName','someValue');
```

--------------------------------

### Wait for page load

Source: https://help.alchemer.com/help/snippets-js-code-snippets-utils

Standard wrapper to ensure scripts run only after the page has fully loaded.

```javascript
document.addEventListener("DOMContentLoaded", function() {
  **// your code here...**
})
```

--------------------------------

### Show Message Center

Source: https://help.alchemer.com/help/alchemer-mobile-cordova-sdk-plugin-guide

Opens the Message Center UI for customer communication.

```javascript
Apptentive.showMessageCenter(successCallback, failureCallback);
```

--------------------------------

### Add Alchemer Mobile via Carthage

Source: https://help.alchemer.com/help/alchemer-mobile-mparticle-integration-guide-ios

Add this line to your Cartfile to include the mParticle-Apptentive kit.

```text
github "mparticle-integrations/mparticle-apple-integration-apptentive"
```

--------------------------------

### Create Basic HTML Tooltip

Source: https://help.alchemer.com/help/hover-text

Use an anchor tag with a nested span to define the tooltip trigger and content.

```html
<a href="#" class="tip">Tooltip Text<span>This is the text that will display in the tooltip pop-up.</span></a>
```

```html
<a href="#" class="tip">Why we ask this<span>Many funders want to know the populations we serve broken down by things like education level, ethnicity, and economic status. Your input helps us tell that story.</span></a>
```
Tokens:
Raw