Since both your content and the advertisement are streamed, you may want to influence ordering of when things render to the user. Have a look at the following example.

On the left, we render multiple ad formats at the same time, even having multiple “cursors” outputting tokens simultaneously.

On the right, we are rendering in order:

  1. Assistant message
  2. InlineAd
  3. BoxAd
  4. Banner, contextual suggestion and chat input.

Ordered rendering results in a more natural user experience. Specifying dependencies is currently in development. If you’d like access please let us know!

​
Containers

You might also want to hide some parts of your application until ads are rendered. One common example is hiding controls or follow-ups while ad text is streaming.

You can achieve this by wrapping your components in special ad placement called ContentContainer. It is just a wrapper around a subtree in your application that appears only when all its dependencies are rendered. You add it in the same way as a placement.

<ContentContainer code="<your-code>">
  <Input {...chatInputProps} />
</ContentContainer>

​
Errors and unfilled inventory

If there is no relevant ad to render or if we encounter an error, we consider the depency fullfilled and we render dependents. This ensures that core user experience is not blocked on ads.

SuggestionStyling