워드프레스로 만든 사이트에 게시한 이미지입니다.

블럭 편집기에서 사용자 정의 HTML을 선택하시고 ES모듈로 만든 코드를 넣어주시면 됩니다. ES모듈로 Gemini의 웹앱을 만들기가 어렵지 워드프레스에 넣는 것은 어렵지 않습니다.

Betheme테마를 이용하는 경우, 하단에 Cusom CSS에 CSS코드를 넣어주세요. ES모듈로 만든 코드는 좌측으로 정렬됩니다.

이것을 가운데 정렬해야 그나마 Betheme와 디자인 어울리므로 아래의 CSS 코드를 넣어 가운데 정렬시켜 주세요.

#container {
  display: flex;
  justify-content: center;
  align-items: center;
}

#promptInput,
#submitPrompt {
  margin: 0;
  padding: 10px 20px;
  border: 1px solid #ccc;
  border-radius: 5px;
}

#submitPrompt {
  background-color: #000;
  color: #fff;
}

코딩지식이 부족하다면, CSS 코드를 사용하는 대신 JavaScript를 낳을 수 있는 플러그인을 이용하여 숏코드를 만드신후 이 숏코드를 중앙정력하는 것이 더 쉬울 수 있습니다.