Platform-specific implementation guidance for the Fintactix Smart Embed system — step-by-step for each CMS environment, with troubleshooting for the issues that come up most often.

Financial institution websites run on a wide variety of platforms — Drupal, WordPress, SharePoint, Squarespace, Webflow, enterprise platforms like Sitecore and Kentico, custom-built systems, and combinations of all of these across different sections of the same institution's digital property. The Fintactix Smart Embed code is the same across platforms, but the steps for correctly placing it and the pitfalls to avoid vary significantly by CMS.

This article provides platform-specific implementation guidance for the CMS environments most commonly used by community banks and credit unions. For each platform, the guide covers where to place the embed code, what platform-specific settings affect the implementation, what issues to watch for, and how to resolve them.

Smart Embed Quick Reference

Before diving into platform-specific steps, here is the complete Smart Embed format that every implementation below uses. All CMS implementations use these same two elements — the difference between platforms is only in how and where they are placed.

The Placeholder Div (Standalone)

<div data-fintactix data-src="https://calculators.fintactix.net/[institution]/mortgage/m01" data-token="[your-embed-token]" data-title="Mortgage Payment Calculator" data-min-height="500"></div>

The Script Tag (Once Per Page)

<script src="https://cdn.fintactix.com/embed/v1/fintactix-embed.js" defer></script>

Accordion Variant (Two Scripts Required)

<div data-fintactix data-fintactix-defer data-src="https://calculators.fintactix.net/[institution]/mortgage/m01" data-token="[your-embed-token]" data-title="Mortgage Payment Calculator" data-min-height="500"></div>
<script src="https://cdn.fintactix.com/embed/v1/fintactix-embed.js" defer></script>
<script src="https://cdn.fintactix.com/embed/v1/fintactix-accordion.js" defer></script>

Before You Start: What You Need

• Embed code from your Calculator Home Page. Log in to your Fintactix admin account and navigate to your Calculator Home Page. The embed code generator there produces correctly formatted, single-line Smart Embed code — including the correct data-src URL and your institution-specific data-token — for each calculator in your licensed library.
• Your embed token. The data-token value is institution-specific and authenticates the embed. It is available on your Calculator Home Page. Do not construct it manually or share it in public repositories.
• Appropriate CMS user permissions. Adding HTML embed code typically requires Editor or Administrator level access. Script tags may require Administrator access on some platforms. Confirm your permission level before beginning.
• A test page or staging environment. Implement and verify on a non-production page first. This is especially important on platforms where HTML attribute handling behavior may be unfamiliar.

Drupal Implementation

Drupal is the platform on which Fintactix calculators are built, and Drupal implementations are the most common among financial institution clients. Drupal's text format system — which controls what HTML attributes are allowed in content fields — is the primary implementation consideration and the most common source of embed failures.

Use Full HTML on Any Field Hosting a Calculator

Drupal's Filtered HTML and Basic HTML text formats strip unrecognized attributes from saved content, even when the element itself (div, script) is listed as allowed. The Smart Embed uses custom data attributes on a div element — data-fintactix, data-src, data-token, data-title, data-min-height, and data-fintactix-defer — that restrictive formats silently strip. The result is a div that renders but has no attributes, leaving the embed script nothing to initialize.

The simplest and most reliable approach is to use the Full HTML text format on any content field that will host a calculator embed. Full HTML bypasses attribute filtering entirely and preserves the div, script tag, and all data attributes as written.

Adding the Embed to a Content Item

• Open the content item for editing.
• In the body field, switch to Full HTML (or a restricted format configured to allow the Smart Embed attributes).
• Switch to the Source view (the HTML button in the editor toolbar).
• Paste the single-line Smart Embed code at the position in the content where the calculator should appear.
• Switch back to the visual editor view.
• Save the content item and view the live page. Inspect the page source to confirm all data attributes are present on the div.

Script Tag Placement in Drupal

The fintactix-embed.js script tag needs to appear on every page containing a calculator, but only once per page — not once per calculator. The recommended approach is to place the script in the page template or use a custom module's hook_page_attachments(), which loads the script consistently without requiring it in every content item's body field.

For simpler implementations, placing the script tag in the body field alongside the placeholder div works correctly, provided the text format allows the script element. For accordion implementations that require fintactix-accordion.js, both scripts should be included via the same mechanism — either both in the template or both in the body field.

Drupal Troubleshooting

Issue	Resolution
Div renders but calculator does not load	Data attributes have been stripped by the text format. Inspect page source — if data-src, data-token, and data-title are missing from the div, switch to Full HTML or update the text format to allow those attributes on the div element.
Calculator loads but is cut off at the bottom	The auto-resize is not working. Confirm fintactix-embed.js is loading (check browser DevTools Network tab for a successful request to cdn.fintactix.com). If the script is loading, confirm the page has not loaded a conflicting version.
Accordion panel opens but calculator does not appear	The data-fintactix-defer attribute is present but fintactix-accordion.js is not loaded. Accordion mode requires both scripts. Add fintactix-accordion.js alongside fintactix-embed.js.
Script tag is stripped from body field	The text format does not allow the script element. Either use Full HTML, add script to the allowed tags list, or move the script tag to the page template rather than the body field.
CDN request blocked	A security module (SecKit, or similar) is blocking requests to cdn.fintactix.com. Add cdn.fintactix.com and calculators.fintactix.net to the module's allowed external sources configuration.

WordPress Implementation

WordPress is widely used by smaller community banks, credit unions, and subsidiary sites of financial institutions. The Smart Embed implementation path in WordPress depends on which editor the site uses, but both paths are straightforward.

Block Editor (Gutenberg) — Recommended Path

The Custom HTML block is the most reliable way to use Smart Embed code in the Gutenberg editor. It accepts div elements with arbitrary data attributes and script elements without filtering, and it is not subject to the role-based filtering that affects WordPress body fields.

• In the page or post editor, click the + button to add a new block.
• Search for 'Custom HTML' and select the Custom HTML block.
• Paste the single-line Smart Embed code — placeholder div and script tag together — into the HTML field of the block.
• The block editor will show a preview placeholder (not the live calculator — this is expected in editor previews).
• Publish or update the page and verify the calculator renders correctly in the live browser environment.

Managing the Script Tag in WordPress

The fintactix-embed.js script tag can be included directly in the Custom HTML block alongside the placeholder div. This is the simplest approach and works correctly as long as each page that contains a calculator includes the script tag at least once.

For sites with many calculator pages, placing the script tag once in the theme's functions.php via wp_enqueue_script() — or through a plugin like Header and Footer Scripts — is a cleaner approach that ensures consistent loading without duplicating the script tag across content items:

// In functions.php
function fintactix_embed_script() {
    wp_enqueue_script(
        'fintactix-embed',
        'https://cdn.fintactix.com/embed/v1/fintactix-embed.js',
        array(),
        null,
        true  // Load in footer
    );
}
add_action('wp_enqueue_scripts', 'fintactix_embed_script');

Classic Editor

In the Classic Editor, switch to the Text (HTML) view and paste the single-line Smart Embed code at the desired position. The div data attributes are generally preserved in the Classic Editor's HTML view, though the same role-based restrictions apply as in the Gutenberg editor for users who lack sufficient permissions.

Page Builder Plugins

WordPress sites using Elementor, Beaver Builder, Divi, or similar page builders should use the HTML or Code widget for Smart Embed placement. Page builder HTML widgets typically do not apply attribute filtering on div elements or script tags, making them one of the most reliable implementation paths in WordPress environments.

WordPress Troubleshooting

Issue	Resolution
Div renders but calculator does not load	The script tag was not saved — either stripped by role-based filtering or omitted. Confirm fintactix-embed.js is loading (browser DevTools Network tab). If not, add the script via functions.php, use a script-injection plugin, or add it through an Administrator account.
Calculator renders in the editor but not on the live page	A caching plugin is serving a cached version of the page from before the embed was added. Clear the site cache through the caching plugin settings and reload the live page.
Security plugin reports blocked request to cdn.fintactix.com	Wordfence, iThemes Security, or similar plugins may have Content Security Policy rules restricting external script sources. Add cdn.fintactix.com to the allowed script-src list in the security plugin settings.
Page builder preview shows blank instead of calculator	Page builder previews typically do not load external iframes or scripts — this is expected. Verify the live page, not the editor preview.
Accordion calculator not loading on panel open	fintactix-accordion.js is missing. Add it via functions.php using the same wp_enqueue_script() pattern, or include it alongside fintactix-embed.js in the Custom HTML block.

SharePoint Online Implementation

SharePoint Online (Microsoft 365) has specific security controls around external content that require administrator configuration before Smart Embeds can function.

Approving External Domains

SharePoint Online restricts both iframe sources and external script sources to approved domain lists. Two Fintactix domains must be approved by the Microsoft 365 tenant administrator:

• calculators.fintactix.net — the domain from which calculator content is served (the data-src URL).
• cdn.fintactix.com — the CDN domain from which fintactix-embed.js and fintactix-accordion.js are served.

Both domains must be approved in the HTML Field Security settings in the SharePoint admin center. Without cdn.fintactix.com being approved, the embed script will be blocked, and the calculator placeholder will not render.

Placing the Smart Embed in SharePoint

Once both domains are approved, use the Embed web part in a SharePoint modern page to place the Smart Embed:

• In a SharePoint page in edit mode, add the Embed web part to the desired section.
• In the web part properties panel, paste the single-line Smart Embed code (placeholder div and script tag) into the embed code field.
• Save and publish the page.
• Verify that both the calculator renders and that fintactix-embed.js loads successfully (in the browser DevTools Network tab).

Auto-Resize in SharePoint

The Smart Embed system handles auto-resize automatically through fintactix-embed.js. No custom Script Editor web part or SPFx extension is required for auto-resize functionality — this is a significant simplification over raw iframe implementations that required a custom postMessage listener on the host page.

If the calculator is rendering but not auto-resizing, the most likely cause is that fintactix-embed.js was blocked by SharePoint's domain restrictions. Verify that cdn.fintactix.com has been added to the approved domain list.

Squarespace Implementation

Squarespace preserves custom HTML attributes in Code Blocks, making Smart Embed placement straightforward on Squarespace-hosted financial institution sites.

• In the page editor, click the + icon to add a new block and select Code (under Insert → Code).
• Paste the single-line Smart Embed code — placeholder div and script tag together — into the Code Block.
• Ensure the block's language is set to HTML (the default).
• Save and preview the page. The calculator will render in the live preview; the editor may show only the raw code.

Squarespace does not strip data attributes from Code Blocks, so no additional configuration is required. For sites with multiple calculators across many pages, Squarespace does not offer a template-level script injection pattern comparable to WordPress's wp_enqueue_script() — the script tag should be included in each Code Block where a calculator appears.

Webflow Implementation

Webflow's Embed element preserves all HTML attributes without filtering, making it the correct placement target for Smart Embed code on Webflow-hosted sites.

• In the Webflow Designer, drag an Embed element from the Add panel onto the page canvas at the desired calculator location.
• In the Embed code editor, paste the single-line Smart Embed code (placeholder div and script tag).
• Click Save & Close, then publish the site.
• Verify the calculator renders on the published domain. Webflow's in-designer preview will typically not execute the embed script — always verify on the live published page.

For sites with calculators on multiple pages, Webflow's project-level or page-level custom code settings (under Project Settings → Custom Code, or Page Settings → Custom Code) can host the fintactix-embed.js script tag once, removing the need to include it in every Embed element.

Enterprise CMS: Sitecore, Kentico, and Similar Platforms

Enterprise content management systems such as Sitecore, Kentico, Adobe Experience Manager, and similar platforms typically offer an HTML component or raw HTML field where Smart Embed code can be placed. The implementation pattern is consistent across these environments:

• Add the placeholder div through the CMS's HTML component or raw HTML field on the page where the calculator should appear.
• Add the fintactix-embed.js script tag to the shared page layout or master template — typically in the footer — so it loads on every page where calculators appear.
• Confirm that the CMS's output encoding is not converting double quotes in data attribute values to HTML entities. If the rendered HTML shows data-src="..." instead of data-src="...", adjust the field's output encoding settings to preserve raw HTML.

For accordion implementations, include fintactix-accordion.js through the same template mechanism alongside fintactix-embed.js.

Custom and Proprietary Platforms

Financial institutions using custom-built CMS platforms, legacy banking website systems, or proprietary content management tools should evaluate two questions before beginning implementation: Does the platform apply attribute filtering to content fields, and does it restrict external script sources?

Verify Attribute Preservation

The most reliable verification approach is to paste the single-line Smart Embed code into a content field, save it, and immediately view the page source. If the data attributes (data-fintactix, data-src, data-token, data-title, data-min-height) are present on the div in the source, attribute filtering is not a problem. If they are missing, the platform's HTML sanitizer is stripping them.

If content fields strip data attributes, implement the placeholder div at the template level — directly in the page's HTML template rather than in a content field. Template-level placement bypasses content filtering and provides consistent calculator presence across all pages of a given type.

Script Tag Handling

Some legacy or proprietary platforms restrict script tags in content fields as a security measure. If the script tag is stripped, load fintactix-embed.js through the platform's equivalent of a shared JavaScript file or page template, rather than including it in each content item's body field.

Testing Protocol for Unknown Platforms

• Step 1: Paste single-line embed code into a content field on a staging page. Save and inspect page source.
• Step 2: Confirm data attributes are present on the div. If not, template-level placement is needed.
• Step 3: Confirm fintactix-embed.js loads (Network tab in browser DevTools — look for a 200 response from cdn.fintactix.com).
• Step 4: Confirm the calculator renders. If the div is present but empty, the script is loaded but may have an origin or token error — contact Fintactix support.
• Step 5: Test auto-resize by opening accordion sections or switching result tabs. If height does not adjust, the script is not running — return to Step 3.

Content Security Policy Directives

If your institution's website enforces a Content Security Policy, two directives must permit Fintactix resources for calculators to load and render correctly:

frame-src https://calculators.fintactix.net;
script-src https://cdn.fintactix.com;

If your CSP is currently in report-only mode, browser consoles will show warnings but the calculator will still load. When the CSP is switched to enforced mode, these directives must be present or calculators will fail to render. Work with your security team to add these to the production CSP before enforcement.

Measuring Placement Performance with the ?source= Parameter

The same calculator can appear in multiple locations on your site — a product page, a homepage widget, a campaign landing page — and each placement may drive meaningfully different engagement. The ?source= URL parameter, appended to the data-src value, lets you distinguish placements in your analytics without deploying a different calculator for each location.

data-src="...mortgage/m01?source=mortgage-product-page"
data-src="...mortgage/m01?source=homepage"
data-src="...mortgage/m01?source=lp-mortgage-refinance"

Both instances run identically for the borrower. In GA4, every fintactix_* event from each placement carries its source value, so you can compare load counts, first interactions, CTA clicks, and Email Results submissions across placements in a single report. Over time, this tells you which pages are generating genuine calculator engagement — and which are just receiving traffic.