---
title: How to create a custom extension in AEP Launch
description: Creating a custom extension using AEP Launch enables AEM Sites and Assets users to easily expand data tracking and marketing tools they use. Learn how!
image: https://blog.3sharecorp.com/hubfs/Chat%20bubbles%20on%20bright%20pink%20background.png
---

[![3SHARE_LOGO_WHITE_2018](https://blog.3sharecorp.com/hs-fs/hubfs/2017%20Website%20Assets/Logos/High%20Res/3SHARE_LOGO_WHITE_2018.png?width=266&height=54&name=3SHARE_LOGO_WHITE_2018.png "3SHARE_LOGO_WHITE_2018")](https://www.3sharecorp.com)

![](https://blog.3sharecorp.com/hubfs/Chat%20bubbles%20on%20bright%20pink%20background.png)

# How to create a custom extension in AEP Launch

Varun Rawat, March 16, 2023

It is a best practice of marketers and site owners to measure and analyse the performance of their content. Though Adobe Analytics is easily part of the Adobe Experience Cloud and easily used for measuring AEM Site activities for example, often marketers will want to use third measurement and marketing tools. Fortunately, these integrations are made easy with AEP Launch.

## What is AEP Launch?

Adobe Experience Platform (AEP) Launch is a tag management system that allows marketers and developers to manage the deployment of marketing and analytics tags on their websites or app. With AEP Launch, users can easily add and remove tags, track events, and gather data about user behaviour without coding or IT involvement. AEP Launch extension is a reusable code snippet enabling users to integrate with third-party tools. Some examples include Google Analytics, Adobe Target, and Facebook Pixel.

 ![adobe-launch-view](https://blog.3sharecorp.com/hs-fs/hubfs/Blog%20Content/2023%20Blog%20Images/adobe-launch-view.jpg?width=595&height=378&name=adobe-launch-view.jpg)

### Prerequisites

1. Basic understanding of AEP launch
2. Install Node.js on your computer
3. Client ID for botpress chatbot [https://botpress.com/docs/cloud/channels/webchat](https://botpress.com/docs/cloud/channels/webchat) 

### Project Setup for Extension development

The scaffolding tool builds out the initial file structure of an extension quickly and easily. It will ask questions and build appropriate files according to the responses. 

Please run the scaffolding tool by executing the following command within your project’s code directory: 

npx @adobe/reactor-scaffold 

![code-setup-1](https://blog.3sharecorp.com/hs-fs/hubfs/Blog%20Content/2023%20Blog%20Images/code-setup-1.jpg?width=1174&height=230&name=code-setup-1.jpg)

The above command will build the following code structure: 

![chatbot-extension-code-setup](https://blog.3sharecorp.com/hs-fs/hubfs/Blog%20Content/2023%20Blog%20Images/chatbot-extension-code-setup.png?width=371&height=243&name=chatbot-extension-code-setup.png)

**botpressChatbot.js **acts as the script for the action type. 

For more details about Action types: [https://experienceleague.adobe.com/docs/experience-platform/tags/extension-dev/web/action-types.html?lang=en](https://experienceleague.adobe.com/docs/experience-platform/tags/extension-dev/web/action-types.html?lang=en) 

**configuration.html** acts as a view allowing a user to supply settings. 

In our case, the settings will be Botpress ClientId. 

### Coding for Extension development

Step 1: Update Configuration .html

```
<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Botpress Chat Configuration</title> 
  <style>
    input:invalid { 
      border: 1px solid red; 
    } 
  </style>
</head>
<body>
    <label> 
        Client ID <input id="clientId" minlength="12" maxlength="48">
    </label>
    <script src="https://assets.adobedtm.com/activation/reactor/extensionbridge/extensionbridge.min.js"></script>
    <script> 
      var clientIdInput = document.querySelector('#clientId'); 
      window.extensionBridge.register({ 
        init: function(info) { 
          if (info.settings) { 
            clientIdInput.value = info.settings.clientId; 
          } 
        }, 
        getSettings: function() { 
          return { 
            clientId: clientIdInput.value, 
          }         }, 
        validate: function() { 
          return clientIdInput.checkValidity(); 
        } 
      }); 
    </script>
</body>
</html>
```

Step 2: Update botpressChatbot.js

```
'use strict'; 
var loadScript = require('@adobe/reactor-load-script'); 
var url = 'https://cdn.botpress.cloud/webchat/v0/inject.js'; 
var loadChatBot; 
module.exports = function(settings) { 
    loadChatBot = loadChatBot || loadScript(url)
        .then(function() { 
        var chatScriptUrl = 'https://mediafiles.botpress.cloud/' + turbine.getExtensionSettings().clientId + '/webchat/config.js'; 
        loadScript(chatScriptUrl); 
      }); 
};
```

### Running Local Sandbox

Run the sandbox by executing the following command from the command line within your project's directory:

npx @adobe/reactor-sandbox 

![run-sandbox](https://blog.3sharecorp.com/hs-fs/hubfs/Blog%20Content/2023%20Blog%20Images/run-sandbox.png?width=1179&height=125&name=run-sandbox.png)

**Note: **Sandbox view will be different from the actual AEP Launch. 

The server will start at **http://localhost:3000** & **https://localhost:4000/** 

Navigate to one of the addresses in your web browser. 

![sandbox-view](https://blog.3sharecorp.com/hs-fs/hubfs/Blog%20Content/2023%20Blog%20Images/sandbox-view.png?width=3006&height=1011&name=sandbox-view.png)

### Testing the Botpress Chat extension in the sandbox

Step1: Click on View Sandbox (http://localhost:3000/) will open the Extension configuration allowing you to configure the settings for your extension. 

For more details refer to: [https://experienceleague.adobe.com/docs/experience-platform/tags/extension-dev/configuration.html?lang=en](https://experienceleague.adobe.com/docs/experience-platform/tags/extension-dev/configuration.html?lang=en) 

Step 2: Click on Library Editor will open the view for configuring the Rule. 

![sandbox-rule-configuration](https://blog.3sharecorp.com/hs-fs/hubfs/Blog%20Content/2023%20Blog%20Images/sandbox-rule-configuration.png?width=2999&height=879&name=sandbox-rule-configuration.png)

 Step 3: Click on Add will open the dropdown. 

![sandbox-rule-configuration-2](https://blog.3sharecorp.com/hs-fs/hubfs/Blog%20Content/2023%20Blog%20Images/sandbox-rule-configuration-2.png?width=2285&height=921&name=sandbox-rule-configuration-2.png)

Step 4: Choose your Botpress Chatbot extension and add the Botpress Client ID. 

![sandbox-rule-configuration-3](https://blog.3sharecorp.com/hs-fs/hubfs/Blog%20Content/2023%20Blog%20Images/sandbox-rule-configuration-3.png?width=1978&height=630&name=sandbox-rule-configuration-3.png)

Step 5: Click Save 

![sandbox-rule-configuration-4](https://blog.3sharecorp.com/hs-fs/hubfs/Blog%20Content/2023%20Blog%20Images/sandbox-rule-configuration-4.png?width=3040&height=784&name=sandbox-rule-configuration-4.png)

Step 6: Click Rules 

![sandbox-rule-configuration-5](https://blog.3sharecorp.com/hs-fs/hubfs/Blog%20Content/2023%20Blog%20Images/sandbox-rule-configuration-5.png?width=2894&height=748&name=sandbox-rule-configuration-5.png)

Step 7: Click Add

![sandbox-rule-configuration-6](https://blog.3sharecorp.com/hs-fs/hubfs/Blog%20Content/2023%20Blog%20Images/sandbox-rule-configuration-6.png?width=2602&height=1310&name=sandbox-rule-configuration-6.png)

Step 8: Add Rule name, choose Page Top Event and Botpress Chatbot Actions 

![sandbox-rule-configuration-7](https://blog.3sharecorp.com/hs-fs/hubfs/Blog%20Content/2023%20Blog%20Images/sandbox-rule-configuration-7.png?width=2243&height=1913&name=sandbox-rule-configuration-7.png)

**Step 9:** Click **Save rule **will add the **Rule** for running our extension. 

For more details about the Rule, refer to: [https://experienceleague.adobe.com/docs/experience-platform/tags/ui/rules.html?lang=en](https://experienceleague.adobe.com/docs/experience-platform/tags/ui/rules.html?lang=en) 

![sandbox-rule-configuration-8](https://blog.3sharecorp.com/hs-fs/hubfs/Blog%20Content/2023%20Blog%20Images/sandbox-rule-configuration-8.png?width=2951&height=830&name=sandbox-rule-configuration-8.png)

**Step 10:** Click on **Library Sandbox**, and the view opens, which shows the **Botpress** chat icon in the bottom right corner of the page. 

This view allows you to test the logic for your extension. 

![sandbox-library-view](https://blog.3sharecorp.com/hs-fs/hubfs/Blog%20Content/2023%20Blog%20Images/sandbox-library-view.png?width=2458&height=1959&name=sandbox-library-view.png)

![chat](https://blog.3sharecorp.com/hs-fs/hubfs/Blog%20Content/2023%20Blog%20Images/chat.png?width=2482&height=1999&name=chat.png)

### Releasing to Adobe Launch

Once testing is done, you need to follow the below process sequentially to release your extension in Adobe Launch: 

1. **Packaging Tool:** [https://www.npmjs.com/package/@adobe/reactor-packager](https://www.npmjs.com/package/@adobe/reactor-packager) 
2. **Uploading Tool:** [https://www.npmjs.com/package/@adobe/reactor-uploader](https://www.npmjs.com/package/@adobe/reactor-uploader) 
3. **Releasing Tool: **[https://www.npmjs.com/package/@adobe/reactor-releaser](https://www.npmjs.com/package/@adobe/reactor-releaser) 

### Conclusion

AEP Launch is incredibly useful and adds a degree of flexibility to an AEM implementation. Are you ready to create an extension of your own but wanting some advice? 3|SHARE will be happy to help with that or any other Adobe Experience Cloud needs. [Contact us](https://www.3sharecorp.com/contact)!

Topics: [Digital Marketing](https://blog.3sharecorp.com/topic/digital-marketing), [Professional IT Consulting Services](https://blog.3sharecorp.com/topic/professional-it-consulting-services), [AEM](https://blog.3sharecorp.com/topic/aem), [Adobe](https://blog.3sharecorp.com/topic/adobe), [Adobe Solutions Partner](https://blog.3sharecorp.com/topic/adobe-solutions-partner)

- [Share on Facebook](https://www.facebook.com/sharer/sharer.php?u=https://blog.3sharecorp.com/how-to-create-a-custom-extension-in-aep-launch&display=popup&ref=plugin)
- [Share on Twitter](https://www.twitter.com/home?status=How%20to%20create%20a%20custom%20extension%20in%20AEP%20Launch%20-%20https://blog.3sharecorp.com/how-to-create-a-custom-extension-in-aep-launch)
- [Share on LinkedIn](https://www.linkedin.com/shareArticle?mini=true&url=https://blog.3sharecorp.com/how-to-create-a-custom-extension-in-aep-launch&title=How%20to%20create%20a%20custom%20extension%20in%20AEP%20Launch&summary=&source=)

### [Varun Rawat](https://blog.3sharecorp.com/author/varun-rawat)

Varun Rawat is an AEM Technical Architect at 3|SHARE. He's based in Canada but one thing he loves about his job is the flexibility of his work schedule and that he can work virtually from anywhere! This is handy for him as he loves to travel. Varun is also very curious when it comes to learning about emerging technologies.

[LinkedIn](https://www.linkedin.com/in/varun-rawat-126230a/)

### Popular Posts

### Posts by Topic

- [Adobe Experience Manager (48)](https://blog.3sharecorp.com/topic/adobe-experience-manager)
- [AEM (33)](https://blog.3sharecorp.com/topic/aem)
- [Adobe (20)](https://blog.3sharecorp.com/topic/adobe)
- [Development (19)](https://blog.3sharecorp.com/topic/development)
- [Digital Marketing (19)](https://blog.3sharecorp.com/topic/digital-marketing)
- [Tech (15)](https://blog.3sharecorp.com/topic/tech)
- [Web Content Management System (13)](https://blog.3sharecorp.com/topic/web-content-management-system)
- [3|SHARE Insider (12)](https://blog.3sharecorp.com/topic/3share-insider)
- [Developer Think Tank (12)](https://blog.3sharecorp.com/topic/developer-think-tank)
- [Digital Asset Management (DAM) (10)](https://blog.3sharecorp.com/topic/digital-asset-management-dam)
- [Professional IT Consulting Services (10)](https://blog.3sharecorp.com/topic/professional-it-consulting-services)
- [Adobe Solutions Partner (8)](https://blog.3sharecorp.com/topic/adobe-solutions-partner)
- [Creative Process (7)](https://blog.3sharecorp.com/topic/creative-process)
- [CMS (6)](https://blog.3sharecorp.com/topic/cms)
- [Content Management System (6)](https://blog.3sharecorp.com/topic/content-management-system)
- [Upgrade (6)](https://blog.3sharecorp.com/topic/upgrade)
- [Content Supply Chain (5)](https://blog.3sharecorp.com/topic/content-supply-chain)
- [Culture (5)](https://blog.3sharecorp.com/topic/culture)
- [Customer Experience (5)](https://blog.3sharecorp.com/topic/customer-experience)
- [Remote Operations Management (ROM) (5)](https://blog.3sharecorp.com/topic/remote-operations-management-rom)
- [Testing (5)](https://blog.3sharecorp.com/topic/testing)
- [Webinars (5)](https://blog.3sharecorp.com/topic/webinars)
- [AI (4)](https://blog.3sharecorp.com/topic/ai)
- [Adobe Summit (4)](https://blog.3sharecorp.com/topic/adobe-summit)
- [Personalization (4)](https://blog.3sharecorp.com/topic/personalization)
- [Sanity (4)](https://blog.3sharecorp.com/topic/sanity)
- [Structured Data (4)](https://blog.3sharecorp.com/topic/structured-data)
- [Design (3)](https://blog.3sharecorp.com/topic/design)
- [Headless (3)](https://blog.3sharecorp.com/topic/headless)
- [Leadership (3)](https://blog.3sharecorp.com/topic/leadership)
- [Quality Assurance (3)](https://blog.3sharecorp.com/topic/quality-assurance)
- [AEM Smart Tags (2)](https://blog.3sharecorp.com/topic/aem-smart-tags)
- [Award (2)](https://blog.3sharecorp.com/topic/award)
- [Content Fragments (2)](https://blog.3sharecorp.com/topic/content-fragments)
- [Evolve (2)](https://blog.3sharecorp.com/topic/evolve)
- [Evolve19 (2)](https://blog.3sharecorp.com/topic/evolve19)
- [Integrations (2)](https://blog.3sharecorp.com/topic/integrations)
- [Migration (2)](https://blog.3sharecorp.com/topic/migration)
- [QA (2)](https://blog.3sharecorp.com/topic/qa)
- [UX (2)](https://blog.3sharecorp.com/topic/ux)
- [AEM as a Cloud Service (1)](https://blog.3sharecorp.com/topic/aem-as-a-cloud-service)
- [AWS (1)](https://blog.3sharecorp.com/topic/aws)
- [Accessibility (1)](https://blog.3sharecorp.com/topic/accessibility)
- [Adobe Center of Excellence (1)](https://blog.3sharecorp.com/topic/adobe-center-of-excellence)
- [Apache (1)](https://blog.3sharecorp.com/topic/apache)
- [CDN (1)](https://blog.3sharecorp.com/topic/cdn)
- [ContextHub (1)](https://blog.3sharecorp.com/topic/contexthub)
- [CraftCMS (1)](https://blog.3sharecorp.com/topic/craftcms)
- [Digital Commerce (1)](https://blog.3sharecorp.com/topic/digital-commerce)
- [Digital Experience Solution Partner of the Year (1)](https://blog.3sharecorp.com/topic/digital-experience-solution-partner-of-the-year)
- [Extracirricular (1)](https://blog.3sharecorp.com/topic/extracirricular)
- [Invasion Test (1)](https://blog.3sharecorp.com/topic/invasion-test)
- [LLM (1)](https://blog.3sharecorp.com/topic/llm)
- [Microdata (1)](https://blog.3sharecorp.com/topic/microdata)
- [Rich Snippets (1)](https://blog.3sharecorp.com/topic/rich-snippets)
- [SEO (1)](https://blog.3sharecorp.com/topic/seo)
- [Security (1)](https://blog.3sharecorp.com/topic/security)
- [Vanity URL (1)](https://blog.3sharecorp.com/topic/vanity-url)
- [Web Server (1)](https://blog.3sharecorp.com/topic/web-server)
- [Workfront (1)](https://blog.3sharecorp.com/topic/workfront)

[see all](https://blog.3sharecorp.com/how-to-create-a-custom-extension-in-aep-launch#)

[![3SHARE_LOGO_WHITE_2018](https://blog.3sharecorp.com/hs-fs/hubfs/2017%20Website%20Assets/Logos/High%20Res/3SHARE_LOGO_WHITE_2018.png?width=266&height=54&name=3SHARE_LOGO_WHITE_2018.png "3SHARE_LOGO_WHITE_2018")](http://3sharecorp.com)

** [info@3sharecorp.com](mailto:info@3sharecorp.com)

** [US: +1 (888) 505-1625](tel:+18885051625)[tel:08003689636](tel:08003689636)

 

[**](https://www.linkedin.com/company/3-share-corporation) [**](https://www.youtube.com/@3share)

Copyright © 2026 [3|SHARE](https://www.3sharecorp.com/). All Rights Reserved.

[Cookie Settings](https://blog.3sharecorp.com/how-to-create-a-custom-extension-in-aep-launch#) ![](https://px.ads.linkedin.com/collect/?pid=8732449&fmt=gif)