Lindris Developers

Appearance

JavaScript Tracker ​

The Lindris JavaScript tracker allows you to track visitor behavior on your website and send this data as events to Lindris. These events can then be used for segmentation and automation purposes.

Installation ​

There are two ways to install the JavaScript tracker:

1. Direct Installation ​

Add a code snippet to your website's <head> section. You can find your unique tracker code in the Event Tracker Settings.

The current tracker embed code version is 1.1.

The embed code looks like the following:

html
<!-- Lindris -->
<script>(function(w,d,v,q,a,f,s,m){w[f]=function(){(w._lndrs=w._lndrs ||[]).push(arguments);};s=d.getElementById(f + v);if(!s){s=d.createElement(v);s.src=a;s.id=f + v;s.async=true;s.type='module';m=d.getElementsByTagName(v)[0];m.parentNode.insertBefore(s,m);w[f]('setup',s);}})(window,document,'script','dataset','https://a.lndrsapi.com/api.js?i=DSNXxXXxXXXxX123XXXX&v=1.1','lindris');</script>
<script>lindris('initT','LIDXxXXxXXXxX123:DSNXxXXxXXXxX123XXXX');</script>

For legacy browser support, please reach out to support.

2. WordPress Plugin ​

If you're using WordPress, you can install the Lindris WordPress plugin:

  1. Go to your WordPress admin panel
  2. Navigate to Plugins > Add New
  3. Search for "Lindris"
  4. Click "Install Now" and then "Activate"
  5. Go to Lindris and connect your Lindris account

Features ​

Page View Tracking ​

The tracker automatically captures page views and sends them as events to Lindris. Each page view event includes:

  • Browser ($browser)
  • Browser language ($browser_language)
  • Browser version ($browser_version)
  • Page URL ($current_url)
  • Page path ($pathname)
  • Host ($host)
  • Page title ($page_title)
  • Referrer ($referrer)
  • Referring domain ($referring_domain)
  • Device type ($device_type - Mobile or Desktop)
  • Operating system ($os)
  • Screen height ($screen_height)
  • Screen width ($screen_width)
  • Viewport height ($viewport_height)
  • Viewport width ($viewport_width)
  • Timestamp ($sent_at)

Revenue Tracking ​

The tracker handles revenue attribution by:

  • Detecting the _ls parameter in URLs
  • Storing the tracking hash in the lindris_pr cookie
  • Including the tracking hash in order events (when using our e-commerce integrations)

See the Revenue Tracking page for more information.

Form Embedding ​

Lindris allows you to embed Lindris-hosted sign-up forms on your website, capturing lead data directly into your Lindris account.

Installation ​

  1. Go to any form in your Lindris dashboard
  2. Click "Share Link" then click the "Embed Code" button
  3. Copy the provided embed code
  4. Paste the code where you want the form to appear on your website

Example embed code:

html
<div data-lindris-form="FIDXXXXxx123XXXXxxxXXXXxxX" data-show-title data-show-description></div>
<script>(function(w,d,v,q,a,f,s,m){w[f]=function(){(w._lndrs=w._lndrs ||[]).push(arguments);};s=d.getElementById(f + v);if(!s){s=d.createElement(v);s.src=a;s.id=f + v;s.async=true;s.type='module';m=d.getElementsByTagName(v)[0];m.parentNode.insertBefore(s,m);w[f]('setup',s);}})(window,document,'script','dataset','https://a.lndrsapi.com/api.js?i=DSNXxXXxXXXxX123XXXX&v=1.1','lindris');</script>
<script>lindris('initForms');</script>

Modifying the Embed Code ​

When generating the embed code for your form, you can customize it directly from the Embed Code modal in the Form editor.

Basic Options ​

  • Show form title: Toggle this option to display or hide the form title on your embedded form
  • Show form description: Toggle this option to display or hide the form description

Advanced Options ​

Click the "Advanced Options" dropdown to access additional customization settings:

  • Style Tag Selector: Enter a CSS selector (e.g., #my-form-styles) for a style tag on your page that should be applied to your form. More information
  • External Stylesheet URL: Provide the URL to an external CSS file with custom styles. An alternative to the Style Tag Selector. More information
  • Additional CSS Classes: Add custom CSS classes to the form container for styling. Useful for targeting in your custom styles. More information
  • Remove global embed code: Enable this if you already have the Lindris tracking script on your page to use a simplified embed code

Each change you make in the modal will automatically update the embed code displayed in the text area. Once you've configured your preferences, simply click "Copy Embed Code" to copy the code to your clipboard, then paste it into your website where you want the form to appear.

Advanced Styling Options ​

Note: The forms are added to the page in the Shadow DOM, which means your site's styles will not be applied to the form by default. This option allows you to apply any custom styles you want to the form.

Customize the appearance of embedded forms using these advanced options:

styleTagSelector ​

Specify a CSS selector for a style tag on your page that contains custom styles for the form:

html
<style id="custom-form-styles">
  .my-form.form-container {
    --background-color: rgba(0, 255, 0, 0.25) !important;
  }
</style>

<script>
lindris('initForms', {
   wrapClass: 'my-form',
   styleTagSelector: '#custom-form-styles'
});
</script>

stylesheetUrl ​

Provide a URL to an external stylesheet containing custom styles:

js
lindris('initForms', {
  stylesheetUrl: 'https://example.com/path/to/custom-styles.css'
});

wrapClass ​

Add custom CSS classes to the form container:

js
lindris('initForms', {
  wrapClass: 'my-custom-form rounded-corners'
});

Browser Compatibility ​

The Lindris embed system supports multiple browser types through different script versions. If you need the legacy or compatibility embed code, reach out to support.

VersionDescriptionBrowser Support
ModernUses ES modules and modern JavaScript featuresChrome 61+, Firefox 60+, Safari 11+, Edge 16+
LegacyTranspiled code with polyfillsIE11, older versions of Chrome, Firefox, Safari, and Edge
CompatibilityAutomatically loads modern or legacy based on browser capabilityAll browsers

Troubleshooting ​

Common Issues ​

Form Not Displaying ​

  1. Check that the form ID is correct
  2. Verify that the embed code is placed correctly in your HTML
  3. Check for JavaScript errors in your browser console
  4. Ensure your site allows loading resources from the Lindris domain

Cross-Origin Issues ​

If you're experiencing cross-origin resource issues:

  1. Make sure your website allows loading content from the Lindris domain
  2. If using a Content Security Policy (CSP), add the Lindris domain to the allowed sources

Styling Issues ​

If custom styles aren't applying:

  1. Verify that the CSS selector is correct
  2. Check that the stylesheet URL is accessible and contains valid CSS
  3. Ensure the wrapper classes are valid CSS class names

Getting Help ​

If you continue to experience issues:

  1. Check the browser console for error messages
  2. Contact Lindris support with the specific error messages and details about your implementation