Web Applications

MetaMap offers the example applications for the following frameworks to show how you can add the MetaMap button to your existing web applications:

• JavaScript
• Angular
• React
• Vue

JavaScript

The JavaScript example uses no framework to add the button to your site.

To run this example, you will need to:

1. Download the files

2. Add your Client ID and Metamap (Flow) ID for your MetaMap to the body tag in the index.html file:

   HTML

   <div class="container">
     <metamap-button clientid="YOUR_CLIENT_ID" flowid="YOUR_FLOW_ID"></metamap-button>
   </div>
   

3. Open the index.html file in your browser.

Angular

The Angular example uses the Angular CLI. To run this example:

1. Download the Angular files

2. Add your Client ID and Metamap (Flow) ID for your MetaMap to the src/app/app.component.html file:

   HTML

   <div class="container">
     <metamap-button
       appVerification
       [attr.clientid]="YOUR_CLIENT_ID"
       [attr.flowid]="YOUR_FLOW_ID"
     >
     </metamap-button>
   </div>
   

3. In the Angular CLI, run the following command:
   npm run start

React

The React example uses the React CLI. To run this example:

1. Download the React files

2. Add your Client ID and Metamap (Flow) ID for your MetaMap to the src/App.js file in the App() function:

   function App() {
      const button = useRef(null);
      const [clientid] = useState('YOUR_CLIENT_ID');
      const [flowid] = useState('YOUR_FLOW_ID');
   

3. In the React CLI, run the following command:
   npm run start

Vue

The Vue example uses the Vue CLI. To run this example:

1. Download the Vue files

2. Add your Client ID and Metamap (Flow) ID for your MetaMap to the src/components/MetamapButton.vue file in the data() function:

   data() {
     return {
       clientid: 'YOUR_CLIENT_ID',
       flowid: 'YOUR_FLOW_ID',
     };
   }
   

3. In the Vue CLI, run the following command:
   npm run dev