API Reference

CSS Customization

In order to allow styling customizations, there is a list of global class names that give you full control on the look and feel of the external search experance.

How to apply styles?

Due to how the external search is being rendered (using shadow DOM), in order to apply the style, add to the document <head> the following <style> tag:

<style id="ask-ai-custom">.ask-ai-external-search-search-bar { background: green; }</style>

Classes

🚧

Internal Ask-AI class names (ie. class names with auto generated name) can and will be changed, please stick to the provided class names.


  • .ask-ai-external-search-search-bar
    • .ask-ai-external-search-search-bar_input
    • .ask-ai-external-search-search-bar_action
    • .ask-ai-external-search-search-bar_action-delimiter
  • .ask-ai-external-search-data-sorcues
    • ask-ai-external-search-data-sources_container
  • .ask-ai-external-search-generative-answer
    • .ask-ai-external-search-generative-answer_text
    • .ask-ai-external-search-generative-answer_show-more
    • ask-ai-external-search-generative-answer_icon
  • .ask-ai-external-search-answers
    • .ask-ai-external-search-answers-answer
      • .ask-ai-external-search-answers-answer_text
      • .ask-ai-external-search-answers-answer_show-more
      • .ask-ai-external-search-answers-answer_title
      • .ask-ai-external-search-answers-answer-confidence
        • .ask-ai-external-search-answers-answer-confidence_data-source
        • .ask-ai-external-search-answers-answer-confidence_score
  • .ask-ai-external-search-cta-popup
    • .ask-ai-external-search-cta-popup_content
  • .ask-ai-external-search-model-footer
    • .ask-ai-external-search-model-footer_powered-by

Common questions

The styles I'm applying are not displaying

  1. Make sure the <style> tag has an id (for example: ask-ai-custom) and the attribute customStylesId was set on the render function call
  2. Make sure you're using the class names provided in the list