Skip to main content

Deploying Breakout via Adobe Tags

Deploying Breakout on the website using Adobe Tags

S
Written by Sachin Gupta

The Breakout script is a lightweight, stable snippet that only needs to be added once. It won't change as new features are released.

If you're already using Adobe Tags to manage scripts on your site, this is the recommended approach for adding Breakout without touching your site's source code.

Prerequisites

  • Access to Adobe Experience Platform Data Collection (the Tags interface)

  • Your Breakout tenant ID and agent ID (you can find these in your Breakout dashboard under Settings → Install)

  • Publishing rights to the Adobe Tags property for your website

Procedure

  1. Open your Adobe Tags property

    1. Sign in to Adobe Experience Platform at experience.adobe.com

    2. From the left navigation, go to Data Collection→Tags

    3. Select the property associated with the website where you want the Breakout agent to appear

  2. Create a new rule

    1. In the left sidebar of your property, click Rules→Add Rule

    2. Give your rule a descriptive name, for example "Load Breakout Agent"

  3. Configure the event (when to load)

    1. Under the Events section, click Add. Configure it as follows. This ensures the Breakout script loads as early as possible on every page.

      • Extension: Core

      • Event Type: Library Loaded (Page Top)

    2. Click Keep Changes
      ​
      ​Note: If you prefer the script to load later in the page lifecycle, you can choose "DOM Ready" or "Window Loaded" instead. "Library Loaded (Page Top)" is recommended for the best visitor experience since it allows the Breakout agent to be ready as soon as the page renders
      ​

  4. Add the Breakout script as an action

    1. Under the Actions section, click Add. Configure it as follows:

      • Extension: Core

      • Action Type: Custom Code

      • Language: HTML

    2. In the code editor that opens, paste the following snippet:
      ​<script async src="https://script.getbreakout.ai/command_bar_widget.js" tenant-id="YOUR_TENANT_ID" agent-id="YOUR_AGENT_ID"> </script>

  5. Replace the following:

    1. YOUR_TENANT_ID with your company's Breakout tenant ID

    2. YOUR_AGENT_ID with the agent ID you want to deploy
      ​
      ​Note: You can find both of these values in your Breakout dashboard
      ​

    3. Click Keep Changes and then Save

  6. Build and Test in a Development Environment

    1. In the left sidebar, click Publishing Flow

    2. Click Add New Library (or open an existing development library).

    3. Give it a name such as "Breakout Agent - Dev" and set the environment to Development

    4. Under Resource Changes, click Add All Changed Resources to include your new rule

    5. Click Save & Build to Development
      ​
      ​Notes:
      ​
      Once the build completes, you can test it by loading your site with the development embed code.
      ​
      To find your development embed code, go to Environments in the left sidebar, and click the install icon next to your Development environment
      ​
      Use a browser extension like Adobe Experience Platform Debugger to confirm the Breakout script is loading and the agent widget appears on the page
      ​

  7. Approve and publish to staging

    1. Once you've confirmed everything works in Development, return to Publishing Flow. Click the arrow on your library and select Submit for Approval

    2. After approval, click Build for Staging

    3. Test again using your staging environment embed code to verify the agent loads correctly in a production-like setting

  8. Publish to Production

    1. When you're satisfied with staging, return to Publishing Flow and click Publish for your library
      ​
      The Breakout agent will now be live on all pages served by your production Adobe Tags embed code.

Troubleshooting

If the Breakout agent doesn't appear after publishing, check the following:

  1. Verify the embed code is present. Use your browser's developer tools (View Source or the Elements panel) to confirm the Adobe Tags library script is loading on the page

  2. Use the Adobe Experience Platform Debugger browser extension to check that your rule is firing and the custom code action is executing

  3. Check the browser console for errors. Look for any network errors related to script.getbreakout.ai or JavaScript errors that might indicate a conflict with other scripts

  4. Confirm your tenant ID and agent ID are correct. A typo in either value will prevent the agent from loading. Cross-reference with your Breakout dashboard under Settings → Install

  5. Check your environment. Make sure you are testing against the correct Adobe Tags environment (Development, Staging, or Production) and that the latest library has been built and published

Did this answer your question?