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.



  1. Basic understanding of AEP launch
  2. Install Node.js on your computer
  3. Client ID for botpress chatbot 

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 


The above command will build the following code structure: 


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

For more details about Action types: 

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">
  <meta charset="UTF-8">
  <title>Botpress Chat Configuration</title>
    input:invalid { 
      border: 1px solid red; 
        Client ID <input id="clientId" minlength="12" maxlength="48">
    <script src=""></script>
      var clientIdInput = document.querySelector('#clientId'); 
        init: function(info) { 
          if (info.settings) { 
            clientIdInput.value = info.settings.clientId; 

        getSettings: function() { 
          return { 
            clientId: clientIdInput.value, 
        validate: function() { 
          return clientIdInput.checkValidity(); 

Step 2: Update botpressChatbot.js

'use strict'; 
var loadScript = require('@adobe/reactor-load-script'); 
var url = ''; 
var loadChatBot; 
module.exports = function(settings) { 
    loadChatBot = loadChatBot || loadScript(url)
        .then(function() { 
        var chatScriptUrl = '' + turbine.getExtensionSettings().clientId + '/webchat/config.js'; 

Running Local Sandbox

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

npx @adobe/reactor-sandbox 


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. 


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: 

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


 Step 3: Click on Add will open the dropdown. 


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


Step 5: Click Save 


Step 6: Click Rules 


Step 7: Click Add


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


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

For more details about the Rule, refer to: 


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. 



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: 
  2. Uploading Tool: 
  3. Releasing Tool: 


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!

Topics: Digital Marketing, Professional IT Consulting Services, AEM, Adobe, Adobe Solutions Partner

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.