# Getting Started

The Dynamic Widget is a powerful visual content management tool designed to help brands create and manage responsive, data-driven, and visually rich components on their e-commerce frontends—without the need for complex development work.

This module is managed directly from Omnitron, allowing business to build and control widget content through an intuitive interface, without relying on frontend deployments.

![](/files/AvKPdVEBPaR6TD4VkxUQ)

This guide walks you through the key elements of the Dynamic Widget builder, from choosing the appropriate Sales Channel and Edit Mode, to working with data sources, selecting templates, and using components for building modular and reusable UI elements.

Dynamic Widget solves several challenges for:

* Reduces dependency on developers by offering both Basic (template-based) and Advanced (component-based) modes.
* Ensures brand consistency across pages through reusable templates and shared data integrations.
* Offers full responsiveness via breakpoints, ensuring widgets render properly on all device sizes.
* Supports integration with dynamic product feeds, APIs, or static data through flexible data source options.

Whether you're launching a new campaign landing page, managing homepage banners, or embedding personalized product recommendations, Dynamic Widget provides a flexible and scalable framework for building impactful content.

The following documentation provides a detailed walkthrough of all configuration steps, supported components, and best practices for getting the most out of this system.

Let's begin with Channel Selection, the first step in defining the scope and context of your widget.

## <mark style="color:red;">**Channel Selection**</mark> <a href="#id-6s4aftv3ofgl" id="id-6s4aftv3ofgl"></a>

**Channel Selection** is the initial step in the widget creation workflow. It defines the sales context for which the widget will be designed and ensures that all subsequent configurations are scoped to a specific **Sales Channel**.

![](/files/3vH8Mmc5NeibdxrOYshQ)

**How it works:**

* Upon clicking on the Dynamic Widget tab in Omnitron, users are immediately prompted to select a Sales Channel.
* The available options are dynamically retrieved from **Omnitron**, where all Sales Channels are centrally defined and managed.
* Each Sales Channel corresponds to a separate e-commerce channel, such as:
* Web store (e.g., `store.com`)
* Native mobile app (iOS/Android)
* Third-party marketplaces (e.g., Amazon, Trendyol)

## <mark style="color:red;">**Mode Selection**</mark> <a href="#vw1csahhod75" id="vw1csahhod75"></a>

**Mode Selection** allows the user to define the **level of complexity and customization** they require while editing a widget. This step is critical because it determines the type of tools and flexibility the user will have during the widget-building process.

**Available Modes:**

1. **Basic Mode** – Template-driven editing mode for quick and easy setups.
2. **Advanced Mode** – Component-level editing mode for fully customized widget design.

![](/files/g1VetQzzwxIEnv3wrpBk)

### <mark style="color:red;">**Basic Mode (Template-Based)**</mark> <a href="#guboy7jd7rgj" id="guboy7jd7rgj"></a>

**Basic Mode** is a simple, template-based editing mode designed for non-technical users or teams who require fast widget setup—such as marketing or merchandising teams. In this mode, users can select from a range of **predefined templates** to quickly populate pages with commonly used elements.

* **Access:** Available via the **Library** section in the left sidebar of the Dynamic Widget interface.
* **How It Works:** Templates can be added directly to the page by **dragging and dropping** them into a designated placeholder area.
* **Key Benefits:**
  * No technical knowledge required.
  * Ideal for quickly adding banners, featured products, campaign content, etc.
  * Greatly reduces setup time and the risk of design inconsistencies.

This mode is perfect for pages that require fast updates such as **campaign landing pages**, **product listings**, or **homepage highlights**.<br>

<figure><img src="/files/d6xPvtEwXjTIN14II44L" alt=""><figcaption></figcaption></figure>

### <mark style="color:red;">**Advanced Mode**</mark> <a href="#zs0sdrmv4vc" id="zs0sdrmv4vc"></a>

**Advanced Mode** is a flexible and fully customizable editing mode, ideal for users with technical proficiency or design teams who want complete control over widget structure and layout. In this mode, widgets are created from scratch using **individual components**.

* **Access:** Available through the **Advanced** section in the sidebar of the Dynamic Widget interface.
* **How It Works:**
  * Users can select **core components** (e.g., titles, buttons, product boxes, image containers) and drag them into the placeholder area.
  * Each component can be deeply customized in terms of style, behavior, and content.<br>
* **Key Benefits:**
  * Enables full design flexibility.
  * Supports complex, brand-specific layouts and interactive widget structures.
  * Allows developers or advanced users to build highly tailored experiences.

Recommended for cases where **custom logic**, **unique branding**, or **rich interactivity** is required.<br>

<figure><img src="/files/Pn6SaFZLWk6hcQUtP5KY" alt=""><figcaption></figcaption></figure>

## <mark style="color:red;">**Page Selection**</mark> <a href="#nhlhagffeoru" id="nhlhagffeoru"></a>

**Page Selection** refers to the step where the user chooses the page on which the widget will be placed. Pages available for selection are predefined in the system (e.g., Home Page, List Page, Checkout Page).

Choosing the correct page ensures that the widget is displayed in the right context and works as expected.

![](/files/acxJA6DYpXrf0QcsEuQe)

## <mark style="color:red;">**Placeholder**</mark> <a href="#xn30r95qgw9i" id="xn30r95qgw9i"></a>

A **Placeholder** is a designated area on a page where widgets can be placed. These areas are predefined in the codebase and act as containers for dynamic widget content.

**Example Usage:**

```javascript
import WidgetPlaceholder from '@akinon/next/components/widget/widget-placeholder';

export default async function Page() {
  return (
    <>
      <WidgetPlaceholder slug="category-page-widgets" />
    </>
  );
}
```

<figure><img src="/files/GUEHpaQwkFrvQ4L79dB6" alt=""><figcaption></figcaption></figure>

## <mark style="color:red;">**Widget Selection**</mark> <a href="#cezjntgzldu7" id="cezjntgzldu7"></a>

**Widget Selection** is the step where users browse and select from existing, previously created widgets. This interface allows users to:

* View a list of saved widgets,
* Choose one for editing,
* Apply changes without needing to create a new widget from scratch.

This feature promotes reusability and consistency across the site, while also saving time during content management.

![](/files/fIjIeECYg4dZimIrHGkg)

## <mark style="color:red;">**Breakpoints**</mark> <a href="#id-2muic9uwm6xx" id="id-2muic9uwm6xx"></a>

**Breakpoints** define how a widget should behave and appear across different screen sizes, enabling **responsive design**. Each breakpoint allows you to configure styles and layout specific to that screen size.

### <mark style="color:red;">**Default Breakpoints**</mark> <a href="#e3azichb3bhu" id="e3azichb3bhu"></a>

* **Desktop:** For large screens like desktops and laptops.
* **Tablet:** For medium-sized screens.
* **Mobile:** For small screens such as smartphones.

### <mark style="color:red;">**Custom Breakpoints**</mark> <a href="#vlh4xy291g0x" id="vlh4xy291g0x"></a>

In addition to the default breakpoints, users can define **custom screen sizes** using the **“Add Breakpoint”** button. This allows for more precise control over how widgets appear on specific devices or viewports.

{% hint style="warning" %}
Responsive design ensures an optimal user experience regardless of the device being used.
{% endhint %}

![](/files/Oej2RabQcEkaBe8jlTfx)


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.akinon.com/tutorials/project-zero/dynamic-widget/getting-started.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.