# Use Cases

# Form Personalization

Novti Form Personalization empowers you to create dynamic and tailored forms on your website, enhancing engagement and conversion rates. With this feature, you can customize forms based on various parameters, providing visitors with personalized experiences that cater to their unique needs and preferences.

Novti Form Personalization allows you to go beyond static forms and create dynamic interactions that adapt to your audience in real-time. Whether you want to adjust form fields based on visitor behavior, segment your audience for targeted messaging, or personalize forms based on geographical location, Novti CMS offers the flexibility and tools to achieve your goals.

# Segment-Based Personalization

Segmentation enables you to categorize your audience into groups with similar characteristics or behaviors. Utilize Novti's Form Personalization to display custom forms tailored to specific segments. By passing segment data through URL parameters, you can dynamically adjust form elements.

Example URLs

https://novti.com/donate?segment=loyal_donors
https://novti.com/donate?segment=new_donors

# Implementation

Create or open an existing form
Drag-and-drop a new HTML Element hidden component at the end of your form builder
Edit the HTML Element component and click on the Logic tab
Click on
Type your logic name, e.g. Segment Personalization and select JavaScript trigger type
In the Text Area, add the following code, which represents the condition the page should meet to trigger the personalization action:
```
result = !!data.segment && !window.formPersonalizationActionExecuted 
```
Click , type an action name, e.g. Segment Personalization, and select Custom Action type to start creating the advanced logic.

Inside the Custom Action (JavaScript) text area, add the following code:

// Get the segment value from the URL
const segment = data.segment

// Get the current form instance
const formKey = Object.keys(Formio.forms)[0]
const currentInstance = Formio.forms[formKey]

// Get the Frequency & Amounts form component, which we will need to dynamically indicate the amounts and frequencies based on the given segment
const frequencyamounts = currentInstance.getComponent('frequencyamounts')

// Only execute this action if the Frequency & Amounts form component exists
if (frequencyamounts === null) {
  return
}

// Now, define conditionally which amounts belong to which frequency based on the given segment. This varies per use case, so adjust accordingly
switch (segment) {
  // Define the amounts for your organization's `loyal donors`
  case 'loyal_donors':

    // Amounts for frequency `once`
    frequencyamounts.component.amounts_once = [{
      label: '€ 32',
      // Multiply the amount by 100 to get cents
      value: 32*100,
    }, {
      label: '€ 64',
      // Or, use cents directly
      value: 6400,
    }, {
      label: '€ 128',
      value: 128*100,
    }]

    // Amounts for frequency `monthly`
    frequencyamounts.component.amounts_monthly = [{
      label: '€ 8',
      value: 8*100,
    }, {
      label: '€ 16',
      value: 16*100,
    }, {
      label: '€ 24',
      value: 24*100,
    }]

    // Amounts for frequency `yearly`
    frequencyamounts.component.amounts_yearly = [{
      label: '€ 50',
      value: 50*100,
    }, {
      label: '€ 100',
      value: 100*100,
    }, {
      label: '€ 200',
      value: 200*100,
    }]

    // Set the default amount (in cents) for frequency `once`
    frequencyamounts.component.amounts_once_default_amount = 64*100

    // Set the default amount (in cents) for frequency `monthly`
    frequencyamounts.component.amounts_monthly_default_amount = 8*100

    // Set the default amount (in cents) for frequency `yearly`
    frequencyamounts.component.amounts_yearly_default_amount = 35*100

    // Set the general default frequency with its corresponding default amount (in cents). In this example we use `once` as the default frequency
    frequencyamounts.setValue({ frequency: 'once', amount: 64*100 })

    // Finish this condition
    break;

  // Define the amounts for your organization's `new donors`
  case 'new_donors':

    frequencyamounts.component.amounts_once = [{
      label: '€ 10',
      value: 10*100,
    }, {
      label: '€ 20',
      value: 20*100
    }, {
      label: '€ 30',
      value: 30*100,
    }]

    frequencyamounts.component.amounts_monthly = [{
      label: '€ 5',
      value: 5*100,
    }, {
      label: '€ 10',
      value: 10*100,
    }, {
      label: '€ 15',
      value: 15*100,
    }]

    // You might not want to show a certain frequency for a specific segment. To exclude a frequency, simply don't define it here, e.g., exclude 'yearly':
    // frequencyamounts.component.amounts_yearly = []

    frequencyamounts.component.amounts_once_default_amount = 10*100
    frequencyamounts.component.amounts_monthly_default_amount = 15*100
    frequencyamounts.setValue({ frequency: 'once', amount: 10*100 })

    break;
}

// Redraw the current form instance to reflect the dynamically added amounts & frequencies
currentInstance.redraw().then(() => window.formPersonalizationActionExecuted = true)

# Geolocation-Based Personalization

Geolocation-based personalization allows you to customize content based on the geographic location of your visitors. Leverage Novti's capabilities to adjust form elements based on visitor location. By passing geolocation data through URL parameters, you can tailor forms to regional preferences.

Example URLs:

https://novti.com/donate?geolocation=eu
https://novti.com/donate?geolocation=uk

# Implementation

Create or open an existing form
Drag-and-drop a new HTML Element hidden component at the end of your form builder
Edit the HTML Element component and click on the Logic tab
Click on
Type your logic name, e.g. Geolocation Personalization and select JavaScript trigger type
In the Text Area, add the following code, which represents the condition the page should meet to trigger the personalization action:
```
result = !!data.geolocation && !window.formPersonalizationActionExecuted 
```
Click , type an action name, e.g. Geolocation Personalization, and select Custom Action type to start creating the advanced logic.

Inside the Custom Action (JavaScript) text area, add the following code:

// Get the geolocation value from the URL
const geolocation = data.geolocation

// Get the current form instance
const formKey = Object.keys(Formio.forms)[0]
const currentInstance = Formio.forms[formKey]

// Get the Frequency & Amounts form component, which we will need to dynamically indicate the amounts and frequencies based on the given geolocation
const frequencyamounts = currentInstance.getComponent('frequencyamounts')

// Only execute this action if the Frequency & Amounts form component exists
if (frequencyamounts === null) {
  return
}

// Now, define conditionally which amounts belong to which frequency based on the given geolocation. This varies per use case, so adjust accordingly
switch (geolocation) {
  // Define the amounts for `eu` based donors
  case 'eu':

    // Amounts for frequency `once`
    frequencyamounts.component.amounts_once = [{
      label: '€ 32',
      // Multiply the amount by 100 to get cents
      value: 32*100,
    }, {
      label: '€ 64',
      // Or, use cents directly
      value: 6400,
    }, {
      label: '€ 128',
      value: 128*100,
    }]

    // Amounts for frequency `monthly`
    frequencyamounts.component.amounts_monthly = [{
      label: '€ 8',
      value: 8*100,
    }, {
      label: '€ 16',
      value: 16*100,
    }, {
      label: '€ 24',
      value: 24*100,
    }]

    // Amounts for frequency `yearly`
    frequencyamounts.component.amounts_yearly = [{
      label: '€ 50',
      value: 50*100,
    }, {
      label: '€ 100',
      value: 100*100,
    }, {
      label: '€ 200',
      value: 200*100,
    }]

    // Set the default amount (in cents) for frequency `once`
    frequencyamounts.component.amounts_once_default_amount = 64*100

    // Set the default amount (in cents) for frequency `monthly`
    frequencyamounts.component.amounts_monthly_default_amount = 8*100

    // Set the default amount (in cents) for frequency `yearly`
    frequencyamounts.component.amounts_yearly_default_amount = 35*100

    // Set the general default frequency with its corresponding default amount (in cents). In this example we use `once` as the default frequency
    frequencyamounts.setValue({ frequency: 'once', amount: 64*100 })

    // Finish this condition
    break;

  // Define the amounts for `uk` based donors
  case 'uk':

    frequencyamounts.component.amounts_once = [{
      // Change the currency symbol
      label: '£ 10',
      value: 10*100,
    }, {
      label: '£ 20',
      value: 20*100
    }, {
      label: '£ 30',
      value: 30*100,
    }]

    frequencyamounts.component.amounts_monthly = [{
      label: '£ 5',
      value: 5*100,
    }, {
      label: '£ 10',
      value: 10*100,
    }, {
      label: '£ 15',
      value: 15*100,
    }]

    // You might not want to show a certain frequency for a specific geolocation. To exclude a frequency, simply don't define it here, e.g., exclude 'yearly':
    // frequencyamounts.component.amounts_yearly = []

    frequencyamounts.component.amounts_once_default_amount = 10*100
    frequencyamounts.component.amounts_monthly_default_amount = 15*100
    frequencyamounts.setValue({ frequency: 'once', amount: 10*100 })

    break;
}

// Redraw the current form instance to reflect the dynamically added amounts & frequencies
currentInstance.redraw().then(() => window.formPersonalizationActionExecuted = true)

# Behavioral Personalization

Behavioral personalization involves customizing forms based on visitor interactions and engagement. Use Novti CMS to use the visitor behavior to dynamically modify form elements accordingly. By passing behavioral data through URL parameters, you can create personalized forms that resonate with visitors.

Example URLs:

https://novti.com/donate?behavior=clicked_action_button
https://novti.com/donate?behavior=visited_action_page

# Implementation

Create or open an existing form
Drag-and-drop a new HTML Element hidden component at the end of your form builder
Edit the HTML Element component and click on the Logic tab
Click on
Type your logic name, e.g. Behavioral Personalization and select JavaScript trigger type
In the Text Area, add the following code, which represents the condition the page should meet to trigger the personalization action:
```
result = !!data.behavior && !window.formPersonalizationActionExecuted 
```
Click , type an action name, e.g. Behavioral Personalization, and select Custom Action type to start creating the advanced logic.

Inside the Custom Action (JavaScript) text area, add the following code:

// Get the behavior value from the URL
const behavior = data.behavior

// Get the current form instance
const formKey = Object.keys(Formio.forms)[0]
const currentInstance = Formio.forms[formKey]

// Get the Frequency & Amounts form component, which we will need to dynamically indicate the amounts and frequencies based on the given behavior
const frequencyamounts = currentInstance.getComponent('frequencyamounts')

// Only execute this action if the Frequency & Amounts form component exists
if (frequencyamounts === null) {
  return
}

// Now, define conditionally which amounts belong to which frequency based on the given behavior. This varies per use case, so adjust accordingly
switch (behavior) {
  // Define the amounts for `clicked action button`
  case 'loyal_donors':

    // Amounts for frequency `once`
    frequencyamounts.component.amounts_once = [{
      label: '€ 32',
      // Multiply the amount by 100 to get cents
      value: 32*100,
    }, {
      label: '€ 64',
      // Or, use cents directly
      value: 6400,
    }, {
      label: '€ 128',
      value: 128*100,
    }]

    // Amounts for frequency `monthly`
    frequencyamounts.component.amounts_monthly = [{
      label: '€ 8',
      value: 8*100,
    }, {
      label: '€ 16',
      value: 16*100,
    }, {
      label: '€ 24',
      value: 24*100,
    }]

    // Amounts for frequency `yearly`
    frequencyamounts.component.amounts_yearly = [{
      label: '€ 50',
      value: 50*100,
    }, {
      label: '€ 100',
      value: 100*100,
    }, {
      label: '€ 200',
      value: 200*100,
    }]

    // Set the default amount (in cents) for frequency `once`
    frequencyamounts.component.amounts_once_default_amount = 64*100

    // Set the default amount (in cents) for frequency `monthly`
    frequencyamounts.component.amounts_monthly_default_amount = 8*100

    // Set the default amount (in cents) for frequency `yearly`
    frequencyamounts.component.amounts_yearly_default_amount = 35*100

    // Set the general default frequency with its corresponding default amount (in cents). In this example we use `once` as the default frequency
    frequencyamounts.setValue({ frequency: 'once', amount: 64*100 })

    // Finish this condition
    break;

  // Define the amounts for `visited action page`
  case 'new_donors':

    frequencyamounts.component.amounts_once = [{
      label: '€ 10',
      value: 10*100,
    }, {
      label: '€ 20',
      value: 20*100
    }, {
      label: '€ 30',
      value: 30*100,
    }]

    frequencyamounts.component.amounts_monthly = [{
      label: '€ 5',
      value: 5*100,
    }, {
      label: '€ 10',
      value: 10*100,
    }, {
      label: '€ 15',
      value: 15*100,
    }]

    // You might not want to show a certain frequency for a specific behavior. To exclude a frequency, simply don't define it here, e.g., exclude 'yearly':
    // frequencyamounts.component.amounts_yearly = []

    frequencyamounts.component.amounts_once_default_amount = 10*100
    frequencyamounts.component.amounts_monthly_default_amount = 15*100
    frequencyamounts.setValue({ frequency: 'once', amount: 10*100 })

    break;
}

// Redraw the current form instance to reflect the dynamically added amounts & frequencies
currentInstance.redraw().then(() => window.formPersonalizationActionExecuted = true)

# RFM (Recency, Frequency, Monetary Value) Personalization

RFM analysis is a marketing framework used to segment and analyze customer behavior based on recency, frequency, and monetary value. With Novti, you can leverage RFM values passed as parameters in the URL to dynamically compose forms for visitors. Adjust form elements based on RFM scores to create personalized experiences.

Components

Here's what each component of RFM represents:

Recency (R):

This measures how recently a customer has made a purchase or engaged with the business. Customers who have interacted more recently are often considered more valuable, as their behavior is seen as more indicative of their current interests and needs.

Frequency (F):

This measures how often a customer makes a purchase or engages with the business over a specific period. Customers who make frequent purchases or interact with the business more often are considered valuable due to their loyalty.

Monetary Value (M):

This represents the total monetary value of a customer's purchases or transactions with the business. Customers who have spent more money are often considered more valuable.

Score

In order to get an overall score, we have to assign scores on a scale of 1 to 3 for each component:

Recency (R):

3: Week ago
2: Month ago
1: 3+ months ago

Frequency (F):

3: Weekly
2: Monthly
1: Quarterly or less

Monetary Value (M):

3: High spender
2: Average spender
1: Average spender or less

In this example, we'll only focus on a simplified score of f (frequency) and m (monetary value), but users can extend their implementation with their organization data:

Frequency (F):

3: Weekly
2: Monthly
1: Quarterly or less

Monetary Value (M):

3: High spender
2: Average spender
1: Average spender or less

For an overall RFM score, we can combine those values. E.g. 33, 32, 31, 23, 22, 21, etc.

In Novti, we can use RFM values to dynamically compose forms for visitors. For instance, we can determine the frequencies that should be enabled, along with the corresponding amounts. One way to leverage the RFM framework in Novti is by passing the RFM values as parameters in the URL. For this example we'll be using the following URL's:

https://novti.com/donate?rfm=333
https://novti.com/donate?rfm=222
https://novti.com/donate?rfm=111

# Implementation

Create or open an existing form
Drag-and-drop a new HTML Element hidden component at the end of your form builder
Edit the HTML Element component and click on the Logic tab
Click on
Type your logic name, e.g. RFM Personalization and select JavaScript trigger type
In the Text Area, add the following code, which represents the condition the page should meet to trigger the personalization action:
```
result = !!data.rfm && !window.formPersonalizationActionExecuted 
```
Click , type an action name, e.g. RFM Personalization, and select Custom Action type to start creating the advanced logic.

Inside the Custom Action (JavaScript) text area, add the following code:

// Get the RFM value from the URL
const rfm = data.rfm

// Get the current form instance
const formKey = Object.keys(Formio.forms)[0]
const currentInstance = Formio.forms[formKey]

// Get the Frequency & Amounts form component, which we will need to dynamically indicate the amounts and frequencies based on the given RFM
const frequencyamounts = currentInstance.getComponent('frequencyamounts')

// Only execute this action if the Frequency & Amounts form component exists
if (frequencyamounts === null) {
  return
}

// Get the RFM scores
const [r, f, m] = rfm.split('')

// Now, define conditionally which amounts belong to which frequency based on the given RFM. This varies per use case, so adjust accordingly.
switch (f) {
  // Define the amounts for donors that donates weekly
  case '3':
    switch (m) {
      // High spenders
      case '3':

        // Amounts for frequency `once`
        frequencyamounts.component.amounts_once = [{
          label: '€ 500',
          // Multiply the amount by 100 to get cents
          value: 500*100,
        }, {
          label: '€ 1000',
          // Or, use cents directly
          value: 100000
        }, {
          label: '€ 2000',
          value: 2000*100
        }]

        frequencyamounts.component.amounts_monthly = [{
          label: '€ 250',
          value: 250*100,
        }, {
          label: '€ 500',
          value: 500*100,
        }, {
          label: '€ 1000',
          value: 1000*100,
        }]

        // Set the default amount (in cents) for frequency `once`
        frequencyamounts.component.amounts_once_default_amount = 1000*100

        // Set the default amount (in cents) for frequency `monthly`
        frequencyamounts.component.amounts_monthly_default_amount = 1000*100

        // Set the general default frequency with its corresponding default amount (in cents). In this example we use `monthly` as the default frequency
        frequencyamounts.setValue({ frequency: 'monthly', amount: 1000*100 })

        // Finish this (m) condition
        break

      // Spend above average
      case '2':
        frequencyamounts.component.amounts_once = [{
          label: '€ 250',
          value: 250*100,
        }, {
          label: '€ 500',
          value: 500*100,
        }, {
          label: '€ 1000',
          value: 1000*100,
        }]

        frequencyamounts.component.amounts_monthly = [{
          label: '€ 125',
          value: 125*100,
        }, {
          label: '€ 250',
          value: 250*100,
        }, {
          label: '€ 500',
          value: 500*100,
        }]

        frequencyamounts.component.amounts_once_default_amount = 1000*100
        frequencyamounts.component.amounts_monthly_default_amount = 500*100
        frequencyamounts.setValue({ frequency: 'monthly', amount: 500*100 })

        break

      // Spend average or less
      case '1':
        frequencyamounts.component.amounts_once = [{
          label: '€ 100',
          value: 100*100,
        }, {
          label: '€ 200',
          value: 200*100,
        }, {
          label: '€ 300',
          value: 300*100,
        }]

        frequencyamounts.component.amounts_monthly = [{
          label: '€ 50',
          value: 50*100,
        }, {
          label: '€ 100',
          value: 100*100,
        }, {
          label: '€ 150',
          value: 150*100,
        }]

        frequencyamounts.component.amounts_once_default_amount = 200*100
        frequencyamounts.component.amounts_monthly_default_amount = 150*100
        frequencyamounts.setValue({ frequency: 'monthly', amount: 150*100 })

        break
    }

    // Finish this (f) condition
    break

  // Define the amounts for donors that donates monthly
  case '2':
    switch (m) {

      // Spends highly
      case '3':
        frequencyamounts.component.amounts_monthly = [{
          label: '€ 50',
          value: 50*100,
        }, {
          label: '€ 100',
          value: 100*100,
        }, {
          label: '€ 150',
          value: 150*100,
        }]

        frequencyamounts.component.amounts_quarterly = [{
          label: '€ 100',
          value: 100*100,
        }, {
          label: '€ 200',
          value: 200*100,
        }, {
          label: '€ 300',
          value: 300*100,
        }]

        frequencyamounts.component.amounts_monthly_default_amount = 150*100
        frequencyamounts.component.amounts_quarterly_default_amount = 200*100
        frequencyamounts.setValue({ frequency: 'quarterly', amount: 200*100 })

        break

      // Spends above average
      case '2':
        frequencyamounts.component.amounts_monthly = [{
          label: '€ 25',
          value: 25*100,
        }, {
          label: '€ 50',
          value: 50*100,
        }, {
          label: '€ 75',
          value: 75*100,
        }]

        frequencyamounts.component.amounts_quarterly = [{
          label: '€ 50',
          value: 50*100,
        }, {
          label: '€ 100',
          value: 100*100,
        }, {
          label: '€ 150',
          value: 150*100,
        }]

        frequencyamounts.component.amounts_monthly_default_amount = 50*100
        frequencyamounts.component.amounts_quarterly_default_amount = 100*100
        frequencyamounts.setValue({ frequency: 'quarterly', amount: 100*100 })

        break

      // Spends average or less
      case '1':
        frequencyamounts.component.amounts_monthly = [{
          label: '€ 10',
          value: 10*100,
        }, {
          label: '€ 20',
          value: 20*100,
        }, {
          label: '€ 30',
          value: 30*100,
        }]

        frequencyamounts.component.amounts_quarterly = [{
          label: '€ 25',
          value: 25*100,
        }, {
          label: '€ 50',
          value: 50*100,
        }, {
          label: '€ 100',
          value: 100*100,
        }]

        frequencyamounts.component.amounts_monthly_default_amount = 10*100
        frequencyamounts.component.amounts_quarterly_default_amount = 25*100
        frequencyamounts.setValue({ frequency: 'quarterly', amount: 25*100 })

        break
    }

    break

  // Define the amounts for donors that donates quarterly or less
  case '1':
    switch (m) {

      // Spends highly
      case '3':
        frequencyamounts.component.amounts_once = [{
          label: '€ 60',
          value: 60*100,
        }, {
          label: '€ 120',
          value: 120*100
        }, {
          label: '€ 240',
          value: 240*100
        }]

        frequencyamounts.component.amounts_once_default_amount =240*100
        frequencyamounts.setValue({ frequency: 'once', amount: 240*100 })

        break

      // Spends above average
      case '2':
        frequencyamounts.component.amounts_once = [{
          label: '€ 15',
          value: 15*100,
        }, {
          label: '€ 30',
          value: 30*100
        }, {
          label: '€ 60',
          value: 60*100
        }]

        frequencyamounts.component.amounts_once_default_amount = 30*100
        frequencyamounts.setValue({ frequency: 'once', amount: 30*100 })

        break

      // Spends average or less
      case '1':
        frequencyamounts.component.amounts_once = [{
          label: '€ 3',
          value: 3*100,
        }, {
          label: '€ 7',
          value: 7*100
        }, {
          label: '€ 12',
          value: 12*100
        }]

        frequencyamounts.component.amounts_once_default_amount = 7*100
        frequencyamounts.setValue({ frequency: 'once', amount: 7*100 })

        break
    }

    break
}

// Redraw the current form instance to reflect the dynamically added amounts & frequencies
currentInstance.redraw().then(() => window.formPersonalizationActionExecuted = true)

Conclusion

These use cases illustrate the versatility of Novti CMS Form Personalization in creating personalized experiences for your website visitors. By leveraging segmentation, geolocation, behavioral data, and RFM analysis, you can optimize forms to drive engagement, and conversions.

For further assistance or inquiries, please reach out to our support team through https://admin.novti.io/support/request.

Start personalizing your forms with Novti CMS today and elevate your user experience!

← Support