Example: Adding a custom third party integration

Adding a custom third party integration involves basically two steps.

Hook into the settings

We need to add some settings variable for the integration to be customizable. Please check  Example: Adding custom settings to eForm Forms.

Setup the admin UI

Now that we have added our settings, we can go ahead and setup our admin settings panel. We shall hook into ipt_fsqm_integration_settings_tabs to properly add our settings panel. Please check  APIs on third party integrations.

Hooking into integration action

Lastly we shall hook into ipt_fsqm_hook_integration to actually do the integration. This part would vary heavily depending on the nature of your integration, but in the snippet below we have made a simple wp_remote_post call.

Snippet and Output

Please check the snippet at our gitlab area.

<?php

class FSQM_Add_Custom_Integration {
	/**
	 * Reference to IPT_FSQM_Form_Elements_Admin object
	 * This is stored during settings filter
	 */
	public $that;

	/**
	 * Constructor
	 * It essentially adds all the necessary filters
	 */
	public function __construct() {
		// Add the filters for admin settings
		add_filter( 'ipt_fsqm_filter_default_settings', array( $this, 'add_settings_variable' ), 10 );
		add_filter( 'ipt_fsqm_integration_settings_tabs', array( $this, 'add_settings_admin_ui' ), 10, 2 );

		// Add the hook for doing the integration
		add_action( 'ipt_fsqm_hook_integration', array( $this, 'fsqm_custom_integration' ), 10, 1 );
	}

	/**
	 * Add our custom variables to the default FSQM settings
	 *
	 * @param      array   $settings  Associative array of settings
	 *
	 * @return     array
	 */
	public function add_settings_variable( $settings ) {
		// Let us add some variables to the default settings
		// For this demo we would add an array with enabled, api and list_id
		$settings['integration']['custom'] = array(
			'enabled' => false,
			'api' => '',
			'list_id' => '',
		);

		return $settings;
	}

	/**
	 * Filter settings tab variable to add our own tab
	 *
	 * @param      array   $tab_settings  Associative array of tab variables
	 * @param      object  $context       Reference to the calling IPT_FSQM_Form_Elements_Admin variable
	 *
	 * @return     array
	 */
	public function add_settings_admin_ui( $tab_settings, $context ) {
		// First we add a new tab
		// to provide UI in order to manage our settings variables
		$tab_settings[] = array(
			'id' => 'ipt_fsqm_form_custom_intg', // HTML ID of the tab
			'label' => __( 'Custom Integration', 'domain' ), // Label of the tab
			'callback' => array( $this, 'settings_admin_ui_cb' ), // Callback function to populate TAB UI
		);

		// Store the reference to the object
		$this->that = $context;

		return $tab_settings;
	}

	public function settings_admin_ui_cb() {
		// Get the options
		$op = $this->that->settings['integration']['custom'];
		// Print the table
		?>
<table class="form-table">
	<tbody>
		<tr>
			<th><?php $this->that->ui->generate_label( 'settings[integration][custom][enabled]', __( 'Enable Custom Integration', 'domain' ) ); ?></th>
			<td>
				<?php $this->that->ui->toggle( 'settings[integration][custom][enabled]', __( 'Yes', 'domain' ), __( 'No', 'domain' ), $op['enabled'], '1', false, true, array(
					'condid' => 'ipt_fsqm_intg_custom_api_wrap,ipt_fsqm_intg_custom_list_id_wrap'
				) ); ?>
			</td>
			<td>
				<?php $this->that->ui->help( __( 'Some inline help', 'domain' ) ); ?>
			</td>
		</tr>
		<tr id="ipt_fsqm_intg_custom_api_wrap">
			<th><?php $this->that->ui->generate_label( 'settings[integration][custom][api]', __( 'API Key', 'domain' ) ); ?></th>
			<td>
				<?php $this->that->ui->text( 'settings[integration][custom][api]', $op['api'], __( 'API Key', 'domain' ) ); ?>
			</td>
			<td>
				<?php $this->that->ui->help( __( 'Get your API key from <a href="http://google.com">here</a>.', 'domain' ) ); ?>
			</td>
		</tr>
		<tr id="ipt_fsqm_intg_custom_list_id_wrap">
			<th><?php $this->that->ui->generate_label( 'settings[integration][custom][list_id]', __( 'List ID', 'domain' ) ); ?></th>
			<td>
				<?php $this->that->ui->text( 'settings[integration][custom][list_id]', $op['list_id'], __( 'List ID', 'domain' ) ); ?>
			</td>
			<td>
				<?php $this->that->ui->help( __( 'Get your List ID from <a href="http://google.com">here</a>.', 'domain' ) ); ?>
			</td>
		</tr>
	</tbody>
</table>
		<?php
	}


	/**
	 * Add into the integration execution hook
	 * To carry out our custom integration
	 *
	 * @param      object  $obj    A reference to the IPT_FSQM_Form_Elements_Data object
	 */
	public function fsqm_custom_integration( $obj ) {
		// Get our custom integration settings
		$settings = $obj->settings['integration']['custom'];

		// Do the integration if necessary
		if ( $settings['enabled'] == true &amp;&amp; '' != $obj->data->email ) {
			// Set the name
			$name = '';
			$su_names = array();
			if ( $obj->data->f_name != '' ) {
				$su_names[] = $obj->data->f_name;
			}
			if ( $obj->data->l_name != '' ) {
				$su_names[] = $obj->data->l_name;
			}
			if ( ! empty( $su_names ) ) {
				$name = implode( ' ', $su_names );
			}
			// Set the email
			$email = $obj->data->email;

			// Set the referer
			$referer = wp_get_referer();

			// Now do something with the information
			wp_remote_post( 'http://google.com', array(
				'data' => array(
					'name' => $name,
					'email' => $email,
					'referer' => $referer,
				),
			) );
		}
	}
}

$mycustom_intg = new FSQM_Add_Custom_Integration();

The output would be as follows:

Custom Integration

Swashata has written 248 articles

Hi there, I am the Lead Developer at WPQuark.com. I love to create something beautiful for WordPress and here I write about how to use them. When I am not working, usually I am doing a number of other creative things ;).