agilecrm / agile-popups

agile-web-popups
6 stars 6 forks source link

Agile CRM - Web Rules

What are web rules?

Web rules allows you to perform certain actions when people visit your website.

For example, when there is an anonymous visitor on the pricing page, pop up a signup form. Or, when a contact in your Agile CRM visits your support page, put him into a campaign that asks if they need any help.

Setup.

Setup this visitor tracking and web rules code on your website

<script type="text/javascript"
 src="https://YOUR_DOMAIN.agilecrm.com/stats/min/agile-min.js"> 
</script>
<script  type="text/javascript">
        _agile.set_account('YOUR_API_KEY', 'YOUR_DOMAIN');
        // _agile.track_page_view(); only if tracking is enabled
        _agile_execute_web_rules(); // this will download all your rules and display the right popup
</script>

You need to change YOUR_DOMAIN (in 2 places) & YOUR_API_KEY accordingly as explained here.

Usage

Defining conditions

You need to define condition(s) first, and then choose the action(s) that need to be performed when all the conditions are met. For defining the conditions, you have the following options.

Page Conditions:

Conditions related to which page the user is on referrer URL.

Page URL

Referrer URL

The referrer or referring page is the URL of the previous webpage from which a link was followed.

Show

Contact Data

For these set of conditions to work, you should have already setup visitor tracking on your website explained here - https://github.com/agilecrm/javascript-api (in section 1). You do not to put up the code present there since the above code covers that. There conditions work only for visitors who are already being tracked and exist as a Contact in Agile CRM.

Defining Actions

The defined actions are performed when all the conditions mentioned are satisfied. One can define multiple actions to be performed. Actions are of multiple types as explained here below.

Popups

This action displays a popup (modal window or a small corner popup) on the web page when all the web rules related to that web page are satisfied.

You can choose on of the 3 types of popup options available.

Modal Popup

This shows a modal popup i.e a popup at the center of the screen with rest of the window greyed out. You can choose from 3 options here

Noty Message

This action displays a simple Noty popup on the web page at the specified location. You can use html tags for the content inside the popup.

Campaign Actions

Add to Campaign:

Puts the contact (visitor) into a Campaign already defined in Agile CRM.

Remove from Campaign:

Removes the contact (visitor) from the a Campaign if already present.

Tags Actions

Score

Execute Code

Javascript

You can provide javascript to be executed on the web page. You can call javascript methods present on your webpage here or write some custom code.

Timing your actions

For popup actions, you can time when to show the popups

Controlling Popups using API

You can close the popup, initialize a form using the contact data (if already present) or save the form data to Agile CRM.

_agile_close_modal() // Closing Popup
_agile_load_fields() // Load fields
_agile_save_form(boolean should_close, function callback) // Save and execute callback if any. should_close determines if the popup should be closed automatically.
_agile_hide_close_button() // Hides close button

Forms & Agile Sync

Forms are now supported in the popups.

Saving Form Fields to Agile

For Agile to correctly identify the mapping, you should mark the attribute of the input field with the name of field in Agile.

<input type="text" name="name" agile-field="first_name" required>

If you are mapping to a custom field, you should use "agile-field" as the attribute

<input type="number" name="form-quantiy" agile-field="quantity" required>

To add tags to contact, you should use "agile-field" as attribute

<input type="hidden" agile-field="tags" value="tag1, tag2, tag3">

Initializing Fields in Popup with the Contact Data

You can initialize the forms with the data of the contact (if available) in the forms.

_agile_load_fields() 

Conflicts with Libraries

Agile uses handlebars and noty plugin. So if you are using the same libraries and experiencing a conflict, you can load your version first using the script standard tag.

All the libraries are checked before they are downloaded. This avoids the conflicts.