Mitindo na ubinafsishaji wa wijeti

Dhibiti muonekano wa wijeti kupitia chaguo za init au kiolesura cha dashibodi.

Ukubwa uliowekwa tayari#

Chagua kati ya ukubwa matatu yaliyojengwa ndani kupitia chatSize na launcherSize:

chatSize	Dirisha la gumzo
compact	340 x 460 px
default	380 x 520 px
large	420 x 600 px

launcherSize hudhibiti kitufe kinachoelea kivyake, bila kutegemea chatSize:

launcherSize	Kitufe cha kufungua	Aikoni
small	48 px	22 px
default	60 px	28 px
large	68 px	32 px

Respondo.init({
  agentId: 'YOUR_AGENT_ID',
  chatSize: 'large',        // dirisha pana na refu zaidi la gumzo
  launcherSize: 'small'     // kitufe kidogo zaidi kinachoelea
});

Uwekaji nafasi#

Rekebisha nafasi ya wijeti kwa offsetBottom na offsetSide (kwa pikseli). Ukiviunganisha na position (bottom-right au bottom-left), unapata udhibiti kamili wa mahali pa kuiweka.

Respondo.init({
  agentId: 'YOUR_AGENT_ID',
  position: 'bottom-left',
  offsetBottom: 40,          // pikseli 40 kutoka chini (chaguo-msingi: 20)
  offsetSide: 30             // pikseli 30 kutoka ukingo wa kushoto (chaguo-msingi: 20)
});

Mviringo wa pembe na Z-Index#

borderRadius hudhibiti mviringo wa pembe za dirisha la gumzo (chaguo-msingi: pikseli 20).zIndex huweka mpangilio wa tabaka (chaguo-msingi: 999999).

Respondo.init({
  agentId: 'YOUR_AGENT_ID',
  borderRadius: 12,    // pembe kali zaidi
  zIndex: 100000       // z-index ndogo ili kuepuka migongano
});

Kwa mitindo ya kina zaidi ya chaguo zilizojengwa ndani, pitisha mfuatano wa customCSS. Huingizwa ndani ya Shadow DOM ya wijeti — inaweza kubadilisha mtindo wowote wa wijeti lakini haiwezi kuathiri ukurasa wako.

Respondo.init({
  agentId: 'YOUR_AGENT_ID',
  customCSS: `
    .respondoai-chat {
      border-radius: 24px;
      box-shadow: 0 12px 48px rgba(0,0,0,0.2);
    }
    .respondoai-launcher {
      box-shadow: none;
      border: 2px solid #e5e7eb;
    }
    .respondoai-header {
      backdrop-filter: blur(10px);
    }
    .respondoai-message.assistant {
      background: #f0f9ff;
    }
    /* Weka mtindo wa kitufe cha CTA ndani ya kadi za matangazo */
    .respondoai-announcement-cta-button {
      border-radius: 999px;
      font-weight: 600;
      letter-spacing: 0.2px;
    }
    /* Panga vitufe vya CTA vya tangazo mstarini badala ya mpangilio wa kawaida wa juu kwenda chini */
    .respondoai-announcement-ctas {
      flex-direction: row;
    }
  `
});

CSS maalum huendeshwa ndani ya Shadow DOM — imetengwa kabisa na mitindo ya ukurasa wako. Unaweza kubadilisha klasi yoyote ya wijeti bila madhara ya pembeni.

Klasi za CSS zinazopatikana:

Klasi	Kipengele
.respondoai-widget	Kontena kuu (position, z-index)
.respondoai-launcher	Kitufe kinachoelea
.respondoai-chat	Dirisha la gumzo
.respondoai-header	Upau wa kichwa cha gumzo
.respondoai-messages	Kontena la orodha ya ujumbe
.respondoai-message.user	Kiputo cha ujumbe wa mtumiaji
.respondoai-message.assistant	Kiputo cha ujumbe wa boti
.respondoai-input-area	Kontena la upau wa kuandika
.respondoai-input	Sehemu ya kuandika maandishi
.respondoai-send	Kitufe cha kutuma
.respondoai-suggestion-btn	Vitufe vya maswali ya haraka
.respondoai-announcement-cta-button	Kitufe cha CTA ndani ya kadi ya tangazo
.respondoai-announcement-ctas	Kifuniko cha vitufe vya CTA ndani ya kadi ya tangazo (mpangilio hulengwa hapa)

Unaweza pia kusanidi chaguo zote za mitindo kutoka dashibodi — nenda Channels → Widget → Appearance. Mabadiliko unayofanya katika dashibodi hufikishwa kwa wijeti kiotomatiki kupitia config API.

Mitindo na ubinafsishaji wa wijeti

Ukubwa uliowekwa tayari#

Uwekaji nafasi#

Mviringo wa pembe na Z-Index#

CSS maalum#