Function IterableEmbeddedView

Example

import {
  IterableAction,
  IterableEmbeddedView,
  IterableEmbeddedViewType,
  type IterableEmbeddedMessage,
  type IterableEmbeddedMessageElementsButton,
} from '@iterable/react-native-sdk';

// See `IterableEmbeddedViewType` for available view types.
const viewType = IterableEmbeddedViewType.Card;

// Messages usually come from the embedded manager. `placementIds` is `number[] | null`
// (use `null` to load messages for all placements), for example:
// Iterable.embeddedManager.getMessages([101, 102]).then((messages) => { ... });
const message: IterableEmbeddedMessage = {
  metadata: {
    messageId: 'test-message-123',
    placementId: 101,
  },
  elements: {
    title: 'Test Title',
    body: 'Test Body',
    buttons: [
      {
        id: 'button-1',
        title: 'Button 1',
        action: new IterableAction('openUrl', 'https://example.com/one'),
      },
      {
        id: 'button-2',
        title: 'Button 2',
        action: new IterableAction('openUrl', 'https://example.com/two'),
      },
    ],
  },
};

// The config is used to style the component.
// See `IterableEmbeddedViewConfig` for available config options.
const config = { backgroundColor: '#FFFFFF', borderCornerRadius: 8 };

// `onButtonClick` will be called when a button is clicked.
// This callback allows you to add custom logic in addition to the SDK's default handling.
const onButtonClick = (button: IterableEmbeddedMessageElementsButton) => {
  console.log('Button clicked', button.id, button.title, button.action);
};

// `onMessageClick` will be called when the message is clicked anywhere outside of a button.
// If a default action is set, it will be handled prior to this callback.
const onMessageClick = () => {
  console.log('Message clicked');
};

return (
  <IterableEmbeddedView
    viewType={viewType}
    message={message}
    config={config}
    onButtonClick={onButtonClick}
    onMessageClick={onMessageClick}
  />
);
Copy