---
schema_version: "1"
id: ea9e27a6aac54b215618e42ea624258609d3dac0e46aa752e4dac78d580d70e7
title: Create Channel Menu Code Settings
collection: admin
version: current
locale: en-us
portal_url: https://docs.salesforce.com/admin/current/en-us/service/264-0-0/embedded_menu_code_changes.md
canonical_url: https://help.salesforce.com/s/articleView?id=service.embedded_menu_code_changes.htm&release=264.0.0&type=5
source_site: help.salesforce.com
content_type: documentation
content_hash: 18d237d91c9d0fcd6833be33c213afc27c71073e08b836875ea955733f90ab8f
description: Add optional JavaScript code as a static resource to your channel menu to change the customer experience. Collect extra information in pre-chat or change the branding for your Enhanced Web Chat channel.
products:
  - Service Cloud
release: "264"
---
# Create Channel Menu Code Settings

Add optional JavaScript code as a static resource to your channel menu to change the customer experience. Collect extra information in pre-chat or change the branding for your Enhanced Web Chat channel.

### Required Editions

![Important](https://sf-zdocs-cdn-prod.zoominsoftware.com/tdta-service-support-264-0-0-production-enus/dd14551c-a772-4db6-9a1d-d84df8df2980/images/icon_important.png)

Important

Channel Menu code snippets created before August 8, 2025 use legacy infrastructure that’s in maintenance mode and scheduled for retirement on July 1, 2026. If you’re using a code snippet generated before August 8, 2025, we recommend updating it to avoid future disruptions. Generate a new snippet from the Get Code section under the deployment settings for your existing Channel Menu deployment and update your webpage. Learn more in [help](https://help.salesforce.com/s/articleView?id=service.embedded_menu_code_snippet.htm&type=5&language=en_US).

<table class="slds-table slds-table_bordered slds-max-medium-table_stacked slds-m-bottom_small edition"><colgroup><col style="width:100%"></colgroup><tbody><tr class=""><td class="slds-cell-wrap" style="vertical-align:top;"><a href="https://help.salesforce.com/s/articleView?id=service.embedded_menu_editions.htm&amp;type=5&amp;language=en_US" target="_blank">View supported editions</a>.</td></tr></tbody></table>

<table class="slds-table slds-table_bordered slds-max-medium-table_stacked slds-m-bottom_small permission">
        <colgroup>
          <col style="width:50%">
          <col style="width:50%">
        </colgroup>
        <thead class="slds-text-title_caps ">
          <tr class="">
            <th scope="colgroup" class="slds-cell-wrap" colspan="2" style="text-align:center;vertical-align:top;" id="d66459e71">User Permissions
              Needed</th>
          </tr>
        </thead>
        <tbody>
          <tr class="">
            <td data-label="User Permissions Needed" class="slds-cell-wrap" style="vertical-align:top;" headers="d66459e71 ">To set up a channel menu:</td>

            <td class="slds-cell-wrap" style="vertical-align:top;" headers="d66459e71 ">Customize Application AND Modify Metadata</td>

          </tr>
          <tr class="">
            <td data-label="User Permissions Needed" class="slds-cell-wrap" style="vertical-align:top;" headers="d66459e71 ">To set up Code Settings:</td>

            <td class="slds-cell-wrap" style="vertical-align:top;" headers="d66459e71 ">Author Apex</td>

          </tr>
        </tbody>
      </table>

Code settings, configured in your channel menu settings, are a useful way to modify menu items with static resource files. To change an image or pass routine information to pre-chat fields or to populate a hidden field, create static resource files and then upload them to Salesforce.

![Note](https://sf-zdocs-cdn-prod.zoominsoftware.com/tdta-service-support-264-0-0-production-enus/dd14551c-a772-4db6-9a1d-d84df8df2980/images/icon_note.png)

Note Code modifications to WhatsApp, SMS text, or phone channels aren’t supported.

Settings are applied first to your website or Experience Builder site from the Channel Menu component settings in the code snippet or Experience Builder. Next, they're applied from your uploaded JavaScript file and then from Setup.

When a code setting is applied to your web or Experience Builder site, the related JavaScript file is loaded. You can associate multiple JavaScript static resources to different code settings, and load the configuration to a website or Experience Builder site.

## Step 1: Create a Snippet Settings File with JavaScript

You can use your JavaScript static resource files, including strings, arrays, JSON, and JavaScript functions for the channel menu. To get started, follow this code example to modify a menu item for channel menu static resource files. Use these supported settings.

<table class="slds-table slds-table_bordered slds-max-medium-table_stacked slds-m-bottom_small ">
          <colgroup>
            <col style="width:50%">
            <col style="width:50%">
          </colgroup>
          <thead class="slds-text-title_caps ">
            <tr class="">
              <th scope="col" class="slds-cell-wrap" style="vertical-align:top;" id="d66459e148">Settings to Modify</th>
              <th scope="col" class="slds-cell-wrap" style="vertical-align:top;" id="d66459e151">Setting Name</th>
            </tr>
          </thead>
          <tbody>
            <tr class="">
              <td data-label="Settings to Modify" class="slds-cell-wrap" style="vertical-align:top;" headers="d66459e148 ">(Enhanced Web Chat) Turn on Enhanced Web Chat developer mode to load
                unminified versions of static files and allow more logging to the developer
                console for troubleshooting. You can also access other <a href="https://developer.salesforce.com/docs/service/messaging-web/guide/introduction.html" target="_blank">Enhanced Web Chat APIs</a>.</td>

              <td data-label="Setting Name" class="slds-cell-wrap" style="vertical-align:top;" headers="d66459e151 ">
                <p> Enhanced Web Chat channel settings:</p>
                <p style="margin-bottom:0;"><code>devMode</code></p>
              </td>

            </tr>
            <tr class="">
              <td data-label="Settings to Modify" class="slds-cell-wrap" style="vertical-align:top;" headers="d66459e148 ">(Chat) Pre-chat and entity creations: Add extra pre-chat information or
                populate form fields to prepare service reps for the customer
                conversation.</td>

              <td data-label="Setting Name" class="slds-cell-wrap" style="vertical-align:top;" headers="d66459e151 ">
                <p>Chat channel
                  settings:</p>
                <p><code>prepopulatedPrechatFields</code></p>
                <p><code>extraPrechatInfo</code></p>
                <p style="margin-bottom:0;"><code>extraPrechatFormDetails</code></p>
              </td>

            </tr>
            <tr class="">
              <td data-label="Settings to Modify" class="slds-cell-wrap" style="vertical-align:top;" headers="d66459e148 ">(Chat) Branding: Customize your menu branding to maintain consistency and
                update changes easily.</td>

              <td data-label="Setting Name" class="slds-cell-wrap" style="vertical-align:top;" headers="d66459e151 ">
                <p>Chat channel
                  settings:</p>
                <p><code>prechatBackgroundImgURL</code></p>
                <p><code>smallCompanyLogoImgURL</code></p>
                <p><code>waitingStateBackgroundImgURL</code></p>
                <p><code>chatbotAvatarImgURL</code></p>
                <p style="margin-bottom:0;"><code>avatarImgURL</code></p>
              </td>

            </tr>
            <tr class="">
              <td data-label="Settings to Modify" class="slds-cell-wrap" style="vertical-align:top;" headers="d66459e148 ">(Chat) Routing: Add routing to direct customer conversations to the right
                service rep.</td>

              <td data-label="Setting Name" class="slds-cell-wrap" style="vertical-align:top;" headers="d66459e151 ">
                <p>Chat channel
                  settings:</p>
                <p><code>directToButtonRouting</code></p>
                <p style="margin-bottom:0;"><code>fallbackRouting</code></p>
              </td>

            </tr>
          </tbody>
        </table>

## Step 2: Upload Your Static Resource Files

With your code ready, upload a file as a static resource in Setup.

For steps, see [Create Embedded Static Resources](https://help.salesforce.com/s/articleView?id=service.embedded_static_resources.htm&type=5&language=en_US).

1. When you upload your file, select **Public** for the cache control.
2. Choose a static resource name that’s easy to remember. Use this name and not the file name in your channel menu settings.

## Step 3: Add Resources to Code Settings

Edit your code settings to link to your static resource file.

1. From Setup, enter Channel Menu in the Quick Find box and select **Channel Menu**.
2. Click the name of the channel menu you want to edit.
3. In the Code Settings section, click **Edit**.
    
    ![Edit page for Channel Menu Code Settings.](https://sf-zdocs-cdn-prod.zoominsoftware.com/tdta-service-support-264-0-0-production-enus/dd14551c-a772-4db6-9a1d-d84df8df2980/support/images/channel_tools/channel_menu_code_settings.png)
4. Select **Add Code Setting**.
5. Enter a unique Code Setting Name for your customization.
    
    ![A screenshot of the code settings overlay with a Code Setting Name added.](https://sf-zdocs-cdn-prod.zoominsoftware.com/tdta-service-support-264-0-0-production-enus/dd14551c-a772-4db6-9a1d-d84df8df2980/support/images/channel_tools/code_settings_panel.png)
6. Add a description and select a resource type.
7. Select your uploaded resource name in the Static Resource field.
8. Select **Add Code Setting** to add more.
9. Save your changes.

## Step 4: Implement Your Code Settings (Experience Builder Sites)

Add your code setting name in the property editor and load the Code Setting Name for your site on a specific page.

![Screenshot of the property editor panel to add your Code Settings Name.](https://sf-zdocs-cdn-prod.zoominsoftware.com/tdta-service-support-264-0-0-production-enus/dd14551c-a772-4db6-9a1d-d84df8df2980/support/images/channel_tools/experience_panel.png)

## Step 5: Implement Your Code Settings (Websites)

Add your code setting name to your channel menu code snippet.

1. Apply a [channel menu code snippet](https://help.salesforce.com/articleView?id=embedded_menu_code_snippet.htm&language=en_US) if you haven't done so yet.
2. Open the code snippet that you added to your website.
3. Add the new parameter as an object to the `embedded_svc.menu.init()` call in the snippet. See the end of this section for an example.
4. Check that the object is the last parameter passed into `embedded_svc.menu.init()`.
5. Verify that your code snippet changes in your web page markup.
6. After 10 minutes, refresh your web page and confirm that the Channel Menu button appears. Check that the static resource is loaded and the item is working on the web page.

Adding a parameter to your channel menu code snippet:

`embedded_svc.menu.init( 	...existing parameters, 	**{ 		pageName: "InsertName" 	}** );`