WordPress Integration

The NExS WordPress plugin makes it easy to embed NExS apps in your WordPress site and control them using shortcodes.

Installation

1. Log in to your WordPress admin dashboard
2. Navigate to Plugins → Add New Plugin
3. Search for “nexs app embed”
4. Click Install Now, then Activate

Or download directly from the WordPress Plugin Directory.

Basic Embedding

Embed a NExS app using the [nexs_app] shortcode:

[nexs_app id="your-app-id"]

Replace your-app-id with your app’s unique ID from the NExS management console.

Example: [nexs_app id="2d73271b-d58b-40e2-9b98-634446d71fee"]

Place this shortcode in any post, page, or widget where you want your app to appear.

Displaying Output Values

Show cell values anywhere on your page with the [nexs_output] shortcode:

[nexs_output cell="B14"]

This displays the formatted value of cell B14.

Example: The estimated cost of your renovation is [nexs_output cell="B14"].

If cell B14 contains 108000 formatted as currency, this displays:

The estimated cost of your renovation is $108,000.

Creating Input Fields

Text Input

[nexs_input cell="B5"]

Creates a text input field linked to cell B5. When users type a value, it’s sent to the NExS app.

Checkbox

[nexs_input type="checkbox" cell="C3" check_label="Include insurance"]

Creates a checkbox that sends 1 (checked) or 0 (unchecked) to cell C3.

Radio Buttons

[nexs_input type="radio" cell="D4" options="Car, Truck, Train"]

Creates three radio buttons. Selecting one sends that option’s text to cell D4.

Dropdown (Select)

[nexs_input type="select" cell="D4" options="Economy, Standard, Premium"]

Creates a dropdown menu. Selecting an option sends that text to cell D4.

View Selector

For apps with multiple views, add a view switching dropdown:

[nexs_viewselect]

This creates a dropdown populated with your app’s view names. Selecting a view switches the display.

Shortcode Reference

[nexs_input] Types

Complete Example

Here’s a WordPress page with a fully customized rate calculator:

<h2>Home Renovation Estimate</h2>

<p>Use our calculator to estimate your renovation costs.</p>

[nexs_app id="2d73271b-d58b-40e2-9b98-634446d71fee"]

<h3>Quick Estimate Form</h3>

<table>
  <tr>
    <td>Square Footage:</td>
    <td>[nexs_input cell="B5"]</td>
  </tr>
  <tr>
    <td>Room Type:</td>
    <td>[nexs_input type="select" cell="B6" options="Kitchen, Bathroom, Bedroom, Living Room"]</td>
  </tr>
  <tr>
    <td>Quality Level:</td>
    <td>[nexs_input type="radio" cell="B7" options="Standard, Premium, Luxury"]</td>
  </tr>
  <tr>
    <td>Include Permits:</td>
    <td>[nexs_input type="checkbox" cell="B8" check_label="Yes, include permit costs"]</td>
  </tr>
</table>

<h3>Your Estimate</h3>

<p style="font-size: 24px; font-weight: bold;">
  Total Cost: [nexs_output cell="B14"]
</p>

<p><em>This estimate is for planning purposes only.</em></p>

Styling Tips

The plugin creates standard HTML elements that you can style with CSS:

/* Style all NExS inputs */
.nexs-input {
  padding: 8px;
  border: 1px solid #ccc;
  border-radius: 4px;
}

/* Style NExS outputs */
.nexs-output {
  font-weight: bold;
  color: #2a7;
}

/* Style the view selector */
.nexs-viewselect {
  padding: 5px;
}

Troubleshooting

App not appearing?

• Verify the app ID is correct (copy from NExS management console)
• Check that your app allows embedding from your WordPress domain (see allowedOrigins setting)
• Ensure the plugin is activated

Inputs not updating the app?

• Confirm the cell addresses match your NExS.app configuration
• Verify the cells are marked as editable in your app

Styling conflicts?

• Use browser developer tools to inspect the generated HTML
• Add more specific CSS selectors if your theme’s styles override plugin styles

Related

• Embedding Basics — General embedding guide
• Declarative API — How the WordPress plugin works under the hood
• Deployment Modes — Configure who can access your app