Sending events in the render function

^{Originally posted by **JakeSCahill** August 9, 2023}
I am using `render()` in my autocomplete instance to customize the display. I want to be able to send events from this customized template. However, I always get `Uncaught Error: Before calling any methods on the analytics, you first need to call the 'init' function with appId and apiKey parameters or provide custom credentials in additional parameters.`.

Events are working fine outside of the `render()` function.

```js
autocomplete({
container: '#autocomplete',
placeholder: 'Search for docs',
detachedMediaQuery: '',
plugins: [],
insights: true,
defaultActiveItemId: 0,
onStateChange({ state }) {
state.preview = null
},
render({ children, state, render, html, components, createElement }, root) {
const { preview } = state.context;
render(
html`

`,
root
);
},
...
```

```js
getSources({ query }) {
if (!query) return [];
return [
{
sourceId: 'docs',
getItems() {
return getAlgoliaResults({
searchClient,
queries: [
{
indexName: '{{{env.ALGOLIA_INDEX_NAME}}}',
query,
params: {
clickAnalytics: true,
hitsPerPage: 10,
attributesToSnippet: ['title:7'],
snippetEllipsisText: '…',
facetFilters: ['version: {{#if (or (eq page.component.title 'home')(eq page.component.layout '404'))}}{{{site.components.ROOT.latest.version}}}{{else}}{{{page.version}}}{{/if}}','product: {{#if (or (eq page.component.title 'home') (eq page.component.layout '404'))}}Redpanda{{else}}{{{page.component.title}}}{{/if}}']
},
},
],
})
},
templates: {
noResults({state, html}) {
state.context.preview = null
if (!state.query) return
return html`

Believe this query should return results? Let us know.

`;
},
header({html}) {
return html`{{#if (or (eq page.component.title 'home') (eq page.component.layout '404'))}}Redpanda{{else}}{{{page.component.title}}}{{/if}} {{#if (or (eq page.component.title 'home')(eq page.component.layout '404'))}}{{{site.components.ROOT.latest.version}}}{{else}}{{{page.version}}}{{/if}}

`;
},
footer({state, html}) {
if (state.context.preview) {
return html``
}
},
item({ item, components, html }) {
return html`

${components.Highlight({
hit: item,
attribute: 'title',
})}

${item.breadcrumbs.length > 2 && item.breadcrumbs.slice(1, item.breadcrumbs.length - 1).map(breadcrumb =>
html`
• ${breadcrumb.t}
`
)}
${item.breadcrumbs.length === 2 && item.breadcrumbs.slice(1).map(breadcrumb =>
html`
• ${breadcrumb.t}
`
)}

`;
},
},
getItemUrl({ item }) {
return item.objectID;
},
onActive({ item, setContext }) {
if (item) {
setContext({ preview: item });
} else {
setContext( { preview: null } );
}
},
},
{
sourceId: 'suggestions',
getItems({ query }) {
return getAlgoliaResults({
searchClient,
queries: [
{
indexName: '{{{env.ALGOLIA_INDEX_NAME}}}_query_suggestions',
query,
params: {
hitsPerPage: 5,
},
},
],
});
},
onSelect({ item, setQuery, setIsOpen, refresh }) {
setQuery(`${item.query} `);
setIsOpen(true);
refresh();
},
templates: {
header({ items, html }) {
if (items.length === 0) {
return null;
}

return html`

Can't find what you're looking for?