# 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

  1. Create or open an existing form
  2. Drag-and-drop a new HTML Element hidden component at the end of your form builder
  3. Edit the HTML Element component and click on the Logic tab
  4. Click on
  5. Type your logic name, e.g. Segment Personalization and select JavaScript trigger type
  6. 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 
    
  7. Click , type an action name, e.g. Segment Personalization, and select Custom Action type to start creating the advanced logic.
  8. 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

  1. Create or open an existing form
  2. Drag-and-drop a new HTML Element hidden component at the end of your form builder
  3. Edit the HTML Element component and click on the Logic tab
  4. Click on
  5. Type your logic name, e.g. Geolocation Personalization and select JavaScript trigger type
  6. 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 
    
  7. Click , type an action name, e.g. Geolocation Personalization, and select Custom Action type to start creating the advanced logic.
  8. 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

  1. Create or open an existing form
  2. Drag-and-drop a new HTML Element hidden component at the end of your form builder
  3. Edit the HTML Element component and click on the Logic tab
  4. Click on
  5. Type your logic name, e.g. Behavioral Personalization and select JavaScript trigger type
  6. 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 
    
  7. Click , type an action name, e.g. Behavioral Personalization, and select Custom Action type to start creating the advanced logic.
  8. 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

  1. Create or open an existing form
  2. Drag-and-drop a new HTML Element hidden component at the end of your form builder
  3. Edit the HTML Element component and click on the Logic tab
  4. Click on
  5. Type your logic name, e.g. RFM Personalization and select JavaScript trigger type
  6. 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 
    
  7. Click , type an action name, e.g. RFM Personalization, and select Custom Action type to start creating the advanced logic.
  8. 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!