function internalMethodOnSuccess () { console.log("ACTIVATED"); }; function internalMethodOnError () { console.log("FAILED TO ACTIVATE"); }; (function () { const params = { uuid: '7cdc22d5-cf8c-4102-a853-a9f00d0256b0' }; var button = document.querySelector(".in-app-button"); button.addEventListener("click", function () { SRInApp.internalMethod("Promotions/activatePromotionByUuid", JSON.stringify(params), internalMethodOnSuccess, internalMethodOnError) }); })();

<div id="webview-simulation" class="bottom-bar">
  <div id="message-content">
    <button onclick="SRInApp.resize('FULLSCREEN', resizeCallbackFull)">to full</button>
    <button onclick="SRInApp.resize('TOP_BAR', resizeCallbackTop)">to top</button>
    <button onclick="SRInApp.resize('BOTTOM_BAR', resizeCallbackBottom)">to bottom</button>
    <button onclick="SRInApp.close()">CLOSE</button>
    <p> Example message </p>
  </div>
</div>

function resizeCallbackFull (width, height) {
  const container = document.getElementById('webview-simulation');
  container.classList.remove('bottom-bar');
  container.classList.remove('top-bar');
  container.classList.add('full-screen');
  container.style.height = height + 'px';
  console.log("Changed to fullscreen");
};

function resizeCallbackTop (width, height) {
  const container = document.getElementById('webview-simulation');
  container.classList.remove('full-screen');
  container.classList.remove('bottom-bar');
  container.classList.add('top-bar');
  container.style.height = '250px';
  console.log("Changed to top bar");
};

function resizeCallbackBottom (width, height) {
  const container = document.getElementById('webview-simulation');
  container.classList.remove('full-screen');
  container.classList.remove('top-bar');
  container.classList.add('bottom-bar');
  container.style.height = '250px';
  console.log("Changed to bottom bar");
};

SRInApp.storage.setItem('myString', 'Hello World');
const exampleString = SRInApp.storage.getItem(myString);
console.log(exampleString); // "Hello World"

SRInApp.storage.setItem('myInt', 42);
const exampleInt = SRInApp.storage.getItem(myInt);
console.log(exampleInt); // 42

SRInApp.storage.setItem('myFloat', 3.14159);
const exampleFloat = SRInApp.storage.getItem(myFloat);
console.log(exampleFloat); // 3.14159

SRInApp.storage.setItem('myBool', true);
const exampleBool = SRInApp.storage.getItem(myBool);
console.log(exampleBool); // true

SRInApp.storage.setItem('myNull', null);
const exampleNull = SRInApp.storage.getItem(myNull);
console.log(exampleNull); // null

// Arrays
SRInApp.storage.setItem('myArray', [1, 2, 3, 4, 5]);
const exampleArray = SRInApp.storage.getItem(myArray);
console.log(exampleArray); // [1,2,3,4,5]

SRInApp.storage.setItem('mixedArray', ['a', 1, true, null]);
const exampleMixed = SRInApp.storage.getItem(mixedArray);
console.log(exampleMixed); // ["a",1,true,null]


// Objects
SRInApp.storage.setItem('user', { name: 'John', age: 30, active: true });
const exampleObject = SRInApp.storage.getItem(user);
console.log(exampleObject.name);   // "John"
console.log(exampleObject.age);    // 30

// Nested objects
SRInApp.storage.setItem('nested', {
    userData: {
        profile: {
            firstName: 'Jane',
            lastName: 'Doe'
        },
        settings: {
            darkMode: true,
            notifications: ['email', 'push']
        }
    },
    timestamp: 1234567890
});
const exampleNested = SRInApp.storage.getItem(nested);
console.log(exampleNested.userData.profile.firstName); // "Jane"

In the `setItem` method, you can include a callback.

SRInApp.storage.setItem('preferences', { theme: 'dark', lang: 'en' },
    function() {
        console.log('Preferences saved successfully!');
        // Continue with next action...
    },
    function(error) {
        console.log('Failed to save preferences:', error);
    }
);

You can add logic to handle non-existing keys.

const data = SRInApp.storage.getItem('nonExistentKey');
if (data === null) {
    console.log('No data found');

// Simple delete SRInApp.storage.removeItem('userName'); // Delete with callback SRInApp.storage.removeItem('user', function() { console.log('User data deleted!'); }, function(error) { console.log('Delete failed:', error); } );

// Simple delete all data of current user SRInApp.storage.clear(); // Delete all storage for current user, with callback SRInApp.storage.clear( function() { console.log('All data cleared!'); }, function(error) { console.log('Clear failed:', error); } );

{ "deviceData": { "os": "string", "osVersion": "string", "appVersion: "string", "darkMode": boolean, "language": "string", "deviceWidth": number, "deviceHeight": number } }

SRInApp.onComponentSizeChanged = function (width, height) {
    console.log("Component resized:", width, height);
};

SRInApp.onComponentSizeChange = function (width, height) {
    console.log("Component resized:", width, height);
};

```swift func snr_inAppMessageHandledCustomMethod(data: InAppMessageData, name: String, parameters: [AnyHashable: Any], completion: InAppCustomMethodCompletion) ```

```java onCustomMethod(String name, HashMap params, InAppMessageData inAppMessageData, InAppCustomMethodCompletion completion) ```

(function () { var button = document.querySelector(".fetch-data-button"); button.addEventListener("click", function () { SRInApp.customMethod("fetchUserData", { userId: "abc123" }, 5000) .then(function (result) { console.log("Data received:", result); }) .catch(function (error) { console.log("Custom method failed:", error); }); }); })();

Allows you to add a field that requires a string value. 1. In the **Label (Optional)** field, enter the name of the field. If this field is empty, the name of the field will be taken from the **Identifier** field. 2. In the **Description (Optional)** field, enter a short explanation of the field's purpose. 3. In the **Default Value** field, enter the default value.

Allows you to add a dropdown list with configurable values. 1. In the **Label (Optional)** field, enter the name of the field. If this field is empty, the name of the field will be taken from the **Identifier** field. 2. In the **Description (Optional)** field, enter a short explanation what this field is for. 3. In the **Display Name** field, enter the name that will be visible in a dropdown. 4. In the **Value** field, enter a value. 5. In the **Default Value** field, enter the default value.

Allows you to add a dropdown list with aggregates, expressions, metrics, voucher pools, recommendations, files, catalogs, and attributes. 1. In the **Label (Optional)** field, enter the name of the field. If this field is empty, the name of the field will be taken from the **Identifier** field. 2. In the **Description (Optional)** field, enter a short explanation what this field is for. 3. From the **Insert Type** dropdown list, select the type of resource: - **Aggregates, AI recommendations, Expressions, Metrics, Voucher pools**: creates a dropdown list of available resources of the selected type. When the user selects a resource in the form, its ID is inserted into the code of the template. This ID can be used in [Jinjava](/developers/inserts/insert-usage) to display the value of the selected resource. - **Catalogs**: creates a dropdown list of catalogs. When the user selects a catalog in the form, its name is inserted into the code of the template. This name can be used in [Jinjava](/developers/inserts/insert-usage#catalogs) to retrieve a value from the catalog. - **Files**: creates a dropdown list of [files](/docs/assets/files-explorer). When user selects a file, its URL is inserted into the code. - **Profile attributes**: creates a dropdown list of profile attributes. When a user selects an attribute, its name is inserted into the code of the template. This name can be used in [Jinjava](/developers/inserts/insert-usage#customer-attributes) to retrieve the attribute value. 3. In the **Default Value (Optional)** field, enter the default value. **Result**: A dropdown with the insert is added to the form in the **Config** tab. From the dropdown list, you can select an item of the chosen type (for example, aggregates). As a result, the value of variable will be ID of the selected item.

Synerise insert select in the configuration form

Allows you to add a field which is enabled/disabled by a toggle. 1. In the **Label (Optional)** field, enter the name of the field. If this field is empty, the name of the field will be taken from the **Identifier** field. 2. In the **Description (Optional)** field, enter a short explanation what this field is for. 3. In the **Default Value** field, select the default value (true/false).

Allows you to add a color selector. You can either select a color or enter its code manually. 1. In the **Label (Optional)** field, enter the name of the field. If this field is empty, the name of the field will be taken from the **Identifier** field. 2. In the **Description (Optional)** field, enter a short explanation what this field is for. 3. In the **Default Value** field, enter the default value.

Allows you to add a field that requires a number. You can either select a number from a dropdown or enter it manually. 1. In the **Label (Optional)** field, enter the name of the field. If this field is empty, the name of the field will be taken from the **Identifier** field. 2. In the **Description (Optional)** field, enter a short explanation what this field is for. 3. In the **Default Value** field, enter the default value.