Каталог шаблонов Авито

<div id="avito-catalog-widget"></div>
<script src="https://инфобаннер.рф/avitoeditor/widget.js"></script>
<script>
  AvitoEditor.init({
    container: '#avito-catalog-widget',
    mode: 'catalog',  // Каталог шаблонов
    width: '100%',
    height: '800px',
    onTemplateSelect: function(data) {
      console.log('Выбран шаблон:', data.templateId);
      // Пользователь откроет редактор в новой вкладке
    }
  });
</script>

Инициализация

const catalog = AvitoEditor.init({
  container: '#my-widget',
  mode: 'catalog',          // Каталог шаблонов
  width: '100%',
  height: '800px',
  onReady: function(instance) {
    console.log('Каталог готов!', instance);
  },
  onTemplateSelect: function(data) {
    console.log('Выбран шаблон #' + data.templateId);
    console.log('Откроется:', data.url);
    // Трафик пойдёт на ваш редактор
  },
  onCategoryChange: function(data) {
    console.log('Переключена категория:', data.category);
  }
});

API методы для каталога

// Фильтровать по категории
catalog._postMessage('filterCategory', { category: 'Электроника' });

// Перезагрузить шаблоны
catalog._postMessage('reload');

События от каталога

templateSelected - пользователь выбрал шаблон

categoryChange - пользователь сменил категорию

ready - каталог загружен

🎨 Доступные темы

Виджет поддерживает 6 цветовых тем. Выберите подходящую под дизайн вашего сайта:

Использование тем

Добавьте параметр theme в URL iframe:

<!-- Светлая тема (по умолчанию) -->
<iframe src="https://инфобаннер.рф/avitoeditor/embed-catalog.html?theme=light"></iframe>

<!-- Тёмная тема -->
<iframe src="https://инфобаннер.рф/avitoeditor/embed-catalog.html?theme=dark"></iframe>

<!-- Синяя тема -->
<iframe src="https://инфобаннер.рф/avitoeditor/embed-catalog.html?theme=blue"></iframe>

<!-- Зелёная тема -->
<iframe src="https://инфобаннер.рф/avitoeditor/embed-catalog.html?theme=green"></iframe>

<!-- Серая тема -->
<iframe src="https://инфобаннер.рф/avitoeditor/embed-catalog.html?theme=gray"></iframe>

<!-- Чёрная тема -->
<iframe src="https://инфобаннер.рф/avitoeditor/embed-catalog.html?theme=black"></iframe>

Переключение темы динамически

<select id="themeSelector">
  <option value="light">Светлая</option>
  <option value="dark">Тёмная</option>
  <option value="blue">Синяя</option>
  <option value="green">Зелёная</option>
  <option value="gray">Серая</option>
  <option value="black">Чёрная</option>
</select>

<iframe id="widget" 
        src="https://инфобаннер.рф/avitoeditor/embed-catalog.html?theme=light">
</iframe>

<script>
document.getElementById('themeSelector').addEventListener('change', function() {
  const theme = this.value;
  const iframe = document.getElementById('widget');
  iframe.src = `https://инфобаннер.рф/avitoeditor/embed-catalog.html?theme=${theme}`;
});
</script>

Простой пример (Iframe)

<iframe 
  src="https://инфобаннер.рф/avitoeditor/embed-catalog.html" 
  width="100%" 
  height="800px" 
  frameborder="0">
</iframe>

Автоматическая инициализация

<div data-avito-editor="catalog" 
     data-width="100%" 
     data-height="800px">
</div>
<script src="https://инфобаннер.рф/avitoeditor/widget.js"></script>

<!-- Каталог загрузится автоматически -->

WordPress шорткод (создайте в functions.php)

function avito_catalog_shortcode() {
    return '<div id="avito-catalog"></div>
    <script src="https://инфобаннер.рф/avitoeditor/widget.js"></script>
    <script>
      AvitoEditor.init({
        container:"#avito-catalog",
        mode:"catalog"
      });
    </script>';
}
add_shortcode('avito_catalog', 'avito_catalog_shortcode');

С отслеживанием кликов

<script>
AvitoEditor.init({
  container: '#catalog',
  mode: 'catalog',
  onTemplateSelect: function(data) {
    // Отправить в Google Analytics
    gtag('event', 'template_click', {
      'template_id': data.templateId,
      'url': data.url
    });
  }
});
</script>

Это действительно бесплатно?

Да! Сейчас интеграция полностью бесплатна. В будущем мы планируем добавить платные функции (аналитика, брендирование, API), но базовый виджет останется бесплатным.

Куда ведут ссылки из каталога?

При клике на шаблон открывается редактор на https://инфобаннер.рф/avitoeditor/editor.html?template=ID в новой вкладке. Это приводит трафик на ваш сайт!

Нужна ли регистрация?

Нет, просто скопируйте код и вставьте на свой сайт.

Можно убрать логотип "Powered by"?

Сейчас нет, но когда запустим платные тарифы — это будет доступно за подписку.

Работает ли на WordPress / Tilda / Wix?

Да, виджет работает на любой платформе, где можно вставить HTML/JavaScript код.

Можно настроить свои шаблоны?

Да, в платной версии вы сможете добавлять собственные шаблоны в каталог.

Есть ли ограничения на трафик?

Пока нет. Мы отслеживаем нагрузку и при необходимости введём справедливые лимиты.

Поддержка?

Напишите нам в Telegram: @yourusername