Guide: Embedding the AMFG Front-End Ordering Portal

Integrating the AMFG Ordering Portal into your company website allows customers to upload parts and receive quotes without leaving your domain. This is achieved by embedding a specific script and a div element into your site’s HTML.

Prerequisites

Before you begin, ensure you have the following information provided by the AMFG Support team:

Your Unique App Token: Replaces <your_app_token_here>.
Your Environment URL: Usually console.amfg.ai, but may differ for ITAR or Sandbox environments.

Implementation Steps

To embed the portal, your web developer needs to perform two primary actions within your website's HTML code.

1. Add the AMFG Script to the `<head>`

Insert the following script tag into the <head> section of your website. This script is essential for handling Account Activation codes sent via email and ensures the portal initializes correctly.

<script src="https://console.amfg.ai/client-app/app.js" type="text/javascript"></script>

Note: If you are using a specific environment (e.g., a Sandbox or ITAR environment), ensure the src URL matches the one provided in your implementation document.

2. Insert the App Container into the `<body>`

Place the following div element into the <body> of your HTML exactly where you want the portal to appear. You can wrap this in other containers to manage its width, height, and alignment.

<div id="amfg-app" data-token="<your_app_token_here>" initOnLoad="true" data-language="EN"></div>

Advanced Configuration via Data Attributes

You can customize the initial behavior of the embedded portal by adding "data-" parameters directly to the amfg-app div. This allows you to control which page loads first or pre-assign a customer's region.

Directing Customers to Specific Tabs

Use the data-page attribute to define which section of the portal opens by default. If this is not set, the portal will load the default homepage.

Data Attribute	Value Options	Result
`data-page="instant-quote"`	`instant-quote`	Opens the Instant Quote part upload tool.
`data-page="catalog"`	`catalog`	Loads your part catalog.
`data-page="catalog/ID"`	`catalog/CUSTOM_ID`	Opens a specific part within the catalog.
`data-page="projects"`	`projects`	Shows the customer's project/order history.
`data-page="quote"`	`quote`	Opens the manual quote request area.

Additional Customization Parameters

data-language: Set the default display language (e.g., "EN", "DE", "FR").
data-region: Pre-set the customer's region (e.g., "Medical") to apply specific pricing quotation forms automatically.
data-focusOnLogin: Set to "false" to prevent the page from automatically scrolling or focusing on the login modal upon load.
data-trackCustomAnalytics: Set to "true" to enable the portal to send Google Analytics events back to your parent website.

Full HTML Example with Parameters

This example shows a portal configured to open directly to the Instant Quote page for customers in the Medical region:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Customer Ordering Portal | My Company</title>
    <script src="https://console.amfg.ai/client-app/app.js" type="text/javascript"></script>
</head>
<body>
    <main class="portal-container">
        <div 
            id="amfg-app" 
            data-token="<your_app_token_here>" 
            data-page="instant-quote"
            data-region="Medical"
            data-language="EN"
            data-focusOnLogin="false"
            initOnLoad="true">
        </div>
    </main>
</body>
</html>

Technical Breakdown of Attributes

Attribute	Purpose
`id="amfg-app"`	The unique identifier the AMFG script looks for to "inject" the portal.
`data-token`	Your unique application identifier. This ensures your specific parts, pricing, and materials are loaded.
`initOnLoad="true"`	Tells the script to start the application automatically as soon as the page loads.
`data-language="EN"`	Sets the default display language for the portal (e.g., EN, DE, FR).

Important Recommendations

Email Validation: If you have enabled email validation in Settings > Application, the script in the <head> is strictly required. It parses the activation code from the URL sent to the customer’s email and passes it to the portal container.
Styling: You can control the portal's appearance (colors, fonts, and buttons) through the Settings > Content & Styling page in your AMFG Management Console.
Testing Environment: We strongly recommend implementing these changes on a staging or development website first. Test the full customer journey—from account creation and email activation to file upload—before pushing the changes to your live production site.