diff --git a/src/index.ts b/src/index.ts
index b5047cb..741b69d 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -1,161 +1,220 @@
-import { defineInterface } from '@directus/extensions-sdk';
-import InterfaceComponent from './interface.vue';
+import { defineInterface } from "@directus/extensions-sdk";
+import InterfaceComponent from "./interface.vue";
 
 export default defineInterface({
-	id: 'api-trigger',
-	name: 'API Trigger',
-	icon: 'sync',
-	description: 'Display a button to trigger custom APIs',
-	component: InterfaceComponent,
-	hideLabel: true,
-	hideLoader: true,
-	types: ['alias'],
-	localTypes: ['presentation'],
-	group: 'presentation',
-	options: ({ collection }) => [
-		{
-			field: 'layout',
-			name: 'Layout',
-			type: 'string',
-			schema: {
-				default_value: 'vertical',
-			},
-			meta: {
-				interface: 'select-dropdown',
-				options: {
-					choices: [
-						{ text: 'Horizontal', value: 'horizontal' },
-						{ text: 'Vertical', value: 'vertical' },
-					],
-				},
-			},
-		},
-		{
-			field: 'triggers',
-			name: 'Triggers',
-			type: 'json',
-			meta: {
-				interface: 'list',
-				options: {
-					fields: [
-						{
-							field: 'label',
-							name: 'Label',
-							type: 'string',
-							meta: {
-								width: 'half',
-								interface: 'input',
-							},
-						},
-						{
-							field: 'size',
-							name: 'Size',
-							type: 'string',
-							schema: {
-								default_value: '',
-							},
-							meta: {
-								width: 'half',
-								interface: 'select-dropdown',
-								options: {
-									choices: [
-										{ text: 'x-small', value: 'x-small' },
-										{ text: 'small', value: 'small' },
-										{ text: 'default', value: '' },
-										{ text: 'large', value: 'large' },
-										{ text: 'x-large', value: 'x-large' },
-									],
-								},
-							},
-						},
-						{
-							field: 'type',
-							name: 'Type',
-							type: 'string',
-							schema: {
-								default_value: 'normal',
-							},
-							meta: {
-								width: 'half',
-								interface: 'select-dropdown',
-								default_value: 'normal',
-								options: {
-									choices: [
-										{ text: 'Primary', value: 'primary' },
-										{ text: 'Normal', value: 'normal' },
-										{ text: 'Info', value: 'info' },
-										{ text: 'Success', value: 'success' },
-										{ text: 'Warning', value: 'warning' },
-										{ text: 'Danger', value: 'danger' },
-									],
-								},
-							},
-						},
-						{
-							field: 'icon',
-							name: 'Icon',
-							type: 'string',
-							meta: {
-								width: 'half',
-								interface: 'select-icon',
-							},
-						},
-						{
-							field: 'url',
-							name: 'URL',
-							type: 'string',
-							meta: {
-								width: 'full',
-								interface: 'input',
-							},
-						},
-						{
-							field: 'method',
-							name: 'Method',
-							type: 'string',
-							schema: {
-								default_value: 'GET',
-							},
-							meta: {
-								interface: 'select-dropdown',
-								width: 'half',
-								options: {
-									choices: [
-										{ text: 'GET', value: 'GET' },
-										{ text: 'POST', value: 'POST' },
-										{ text: 'PUT', value: 'PUT' },
-										{ text: 'PATCH', value: 'PATCH' },
-										{ text: 'DELETE', value: 'DELETE' },
-									],
-								},
-							},
-						},
-						{
-							field: 'reload',
-							name: 'Reload',
-							type: 'boolean',
-							schema: {
-								default_value: false,
-							},
-							meta: {
-								interface: 'boolean',
-								width: 'half',
-							},
-						},
-						{
-							field: 'disabledConditions',
-							name: 'Disabled Conditions',
-							type: 'json',
-							meta: {
-								interface: 'system-filter',
-								options: {
-									collectionName: collection,
-								},
-							},
-						},
-					],
-				},
-			},
-		},
-	],
+  id: "api-trigger",
+  name: "API Trigger",
+  icon: "sync",
+  description: "Display a button to trigger custom APIs",
+  component: InterfaceComponent,
+  hideLabel: true,
+  hideLoader: true,
+  types: ["alias"],
+  localTypes: ["presentation"],
+  group: "presentation",
+  options: ({ collection }) => [
+    {
+      field: "layout",
+      name: "Layout",
+      type: "string",
+      schema: {
+        default_value: "vertical",
+      },
+      meta: {
+        interface: "select-dropdown",
+        options: {
+          choices: [
+            {
+              text: "Horizontal",
+              value: "horizontal",
+            },
+            {
+              text: "Vertical",
+              value: "vertical",
+            },
+          ],
+        },
+      },
+    },
+    {
+      field: "triggers",
+      name: "Triggers",
+      type: "json",
+      meta: {
+        interface: "list",
+        options: {
+          fields: [
+            {
+              field: "label",
+              name: "Label",
+              type: "string",
+              meta: {
+                width: "half",
+                interface: "input",
+              },
+            },
+            {
+              field: "size",
+              name: "Size",
+              type: "string",
+              schema: {
+                default_value: "",
+              },
+              meta: {
+                width: "half",
+                interface: "select-dropdown",
+                options: {
+                  choices: [
+                    {
+                      text: "x-small",
+                      value: "x-small",
+                    },
+                    {
+                      text: "small",
+                      value: "small",
+                    },
+                    {
+                      text: "default",
+                      value: "",
+                    },
+                    {
+                      text: "large",
+                      value: "large",
+                    },
+                    {
+                      text: "x-large",
+                      value: "x-large",
+                    },
+                  ],
+                },
+              },
+            },
+            {
+              field: "type",
+              name: "Type",
+              type: "string",
+              schema: {
+                default_value: "normal",
+              },
+              meta: {
+                width: "half",
+                interface: "select-dropdown",
+                default_value: "normal",
+                options: {
+                  choices: [
+                    {
+                      text: "Primary",
+                      value: "primary",
+                    },
+                    {
+                      text: "Normal",
+                      value: "normal",
+                    },
+                    {
+                      text: "Info",
+                      value: "info",
+                    },
+                    {
+                      text: "Success",
+                      value: "success",
+                    },
+                    {
+                      text: "Warning",
+                      value: "warning",
+                    },
+                    {
+                      text: "Danger",
+                      value: "danger",
+                    },
+                  ],
+                },
+              },
+            },
+            {
+              field: "icon",
+              name: "Icon",
+              type: "string",
+              meta: {
+                width: "half",
+                interface: "select-icon",
+              },
+            },
+            {
+              field: "url",
+              name: "URL",
+              type: "string",
+              meta: {
+                width: "full",
+                interface: "system-display-template",
+                options: {
+                  collectionName: collection,
+                  font: "monospace",
+                  placeholder: "/items/collection/{{ id }}",
+                },
+              },
+            },
+            {
+              field: "method",
+              name: "Method",
+              type: "string",
+              schema: {
+                default_value: "GET",
+              },
+              meta: {
+                interface: "select-dropdown",
+                width: "half",
+                options: {
+                  choices: [
+                    {
+                      text: "GET",
+                      value: "GET",
+                    },
+                    {
+                      text: "POST",
+                      value: "POST",
+                    },
+                    {
+                      text: "PUT",
+                      value: "PUT",
+                    },
+                    {
+                      text: "PATCH",
+                      value: "PATCH",
+                    },
+                    {
+                      text: "DELETE",
+                      value: "DELETE",
+                    },
+                  ],
+                },
+              },
+            },
+            {
+              field: "reload",
+              name: "Reload",
+              type: "boolean",
+              schema: {
+                default_value: false,
+              },
+              meta: {
+                interface: "boolean",
+                width: "half",
+              },
+            },
+            {
+              field: "disabledConditions",
+              name: "Disabled Conditions",
+              type: "json",
+              meta: {
+                interface: "system-filter",
+                options: {
+                  collectionName: collection,
+                },
+              },
+            },
+          ],
+        },
+      },
+    },
+  ],
 });
diff --git a/src/interface.vue b/src/interface.vue
index 4b96181..2eabaaf 100644
--- a/src/interface.vue
+++ b/src/interface.vue
@@ -1,145 +1,158 @@
 <template>
-	<div class="trigger-list" :class="[layout]">
-		<v-button
-			v-for="(trigger, index) in triggers"
-			:key="index"
-			class="action"
-			:class="[trigger.type]"
-			:loading="loadings[index].value"
-			:disabled="disableds[index]"
-			:secondary="trigger.type !== 'primary'"
-			v-bind="{ [trigger.size]: true }"
-			@click="onClick(trigger.method, parsedUrls[index], index)"
-		>
-			<v-icon v-if="trigger.icon" left :name="trigger.icon" />
-			<span v-if="trigger.label">{{ trigger.label }}</span>
-		</v-button>
-	</div>
+  <div class="trigger-list" :class="[layout]">
+    <v-button
+      v-for="(trigger, index) in triggers"
+      :key="index"
+      class="action"
+      :class="[trigger.type]"
+      :loading="loadings[index].value"
+      :disabled="disableds[index]"
+      :secondary="trigger.type !== 'primary'"
+      v-bind="{ [trigger.size]: true }"
+      @click="onClick(trigger.method, parsedUrls[index], index)"
+    >
+      <v-icon v-if="trigger.icon" left :name="trigger.icon" />
+      <span v-if="trigger.label">{{ trigger.label }}</span>
+    </v-button>
+  </div>
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, inject, PropType, ref } from 'vue';
-import { useRouter } from 'vue-router';
-import { useApi, useStores } from '@directus/extensions-sdk';
-import { Filter } from '@directus/shared/types';
-import { render } from 'micromustache';
-import { checkConditions } from './check-conditions';
+import { computed, defineComponent, inject, PropType, ref } from "vue";
+import { useRouter } from "vue-router";
+import { useApi, useStores } from "@directus/extensions-sdk";
+import { Filter } from "@directus/shared/types";
+import { render } from "micromustache";
+import { checkConditions } from "./check-conditions";
 
 type Trigger = {
-	label: string;
-	size: string;
-	type: string;
-	icon: string;
-	url: string;
-	method: string;
-	disabledConditions: Filter;
-	reload: boolean;
+  label: string;
+  size: string;
+  type: string;
+  icon: string;
+  url: string;
+  method: string;
+  disabledConditions: Filter;
+  reload: boolean;
 };
 
 export default defineComponent({
-	props: {
-		triggers: {
-			type: Array as PropType<Trigger[]>,
-			default: null,
-		},
-		layout: {
-			type: String,
-			default: 'vertical',
-		},
-	},
-	setup(props) {
-		const api = useApi();
-		const { useNotificationsStore } = useStores();
-		const store = useNotificationsStore();
-		const router = useRouter();
-
-		const values = inject('values', ref<Record<string, any>>({}));
-		const parsedUrls = computed(() => props.triggers.map((trigger) => render(trigger.url ?? '', values.value)));
-		const disableds = computed(() => props.triggers.map((trigger) => (
-			trigger.disabledConditions && checkConditions(values.value, trigger.disabledConditions)),
-		));
-
-		const loadings = props.triggers.map(() => ref(false));
-
-		return { loadings, parsedUrls, disableds, onClick };
-
-		async function onClick(method: string, url: string, index: number) {
-			const loading = loadings[index];
-			if (!loading) return;
-			loading.value = true;
-
-			try {
-				await api.request({
-					method,
-					url,
-				});
-				if (props.triggers[index]?.reload) {
-					router.go(0);
-				} else {
-					store.add({
-						title: 'Success',
-						type: 'success',
-					});
-				}
-			} catch (error: any) {
-				const message = error.response?.data?.errors?.[0]?.message || error.message || undefined;
-				store.add({
-					title: 'Error',
-					text: message,
-					type: 'error',
-					dialog: true,
-					error,
-				});
-			} finally {
-				loading.value = false;
-			}
-		}
-	},
+  props: {
+    triggers: {
+      type: Array as PropType<Trigger[]>,
+      default: null,
+    },
+    layout: {
+      type: String,
+      default: "vertical",
+    },
+  },
+  setup(props) {
+    const api = useApi();
+    const { useNotificationsStore } = useStores();
+    const store = useNotificationsStore();
+    const router = useRouter();
+
+    const values = inject("values", ref<Record<string, any>>({}));
+    const parsedUrls = computed(() =>
+      props.triggers.map((trigger) => render(trigger.url ?? "", values.value))
+    );
+    const disableds = computed(() =>
+      props.triggers.map(
+        (trigger) =>
+          trigger.disabledConditions &&
+          checkConditions(values.value, trigger.disabledConditions)
+      )
+    );
+
+    const loadings = props.triggers.map(() => ref(false));
+
+    return { loadings, parsedUrls, disableds, onClick };
+
+    async function onClick(method: string, url: string, index: number) {
+      const loading = loadings[index];
+      if (!loading) return;
+      loading.value = true;
+
+      try {
+        const result = await api.request({
+          method,
+          url,
+        });
+        if (props.triggers[index]?.reload) {
+          router.go(0);
+        } else {
+          store.add({
+            title: result.data?.title || "Success",
+            text: result.data?.text || "Action was completed successfully",
+            type: result.data?.type || "success",
+            dialog: result.data?.dialog || false,
+          });
+
+          if (result.data?.goto) router.push(result.data.goto);
+        }
+      } catch (error: any) {
+        const message =
+          error.response?.data?.errors?.[0]?.message ||
+          error.message ||
+          undefined;
+        store.add({
+          title: "Error",
+          text: message,
+          type: "error",
+          dialog: true,
+          error,
+        });
+      } finally {
+        loading.value = false;
+      }
+    }
+  },
 });
 </script>
 
 <style lang="scss" scoped>
 .trigger-list {
-	display: flex;
-	gap: 8px;
+  display: flex;
+  gap: 8px;
 
-	&.vertical {
-		flex-direction: column;
-	}
+  &.vertical {
+    flex-direction: column;
+  }
 
-	&.horizontal {
-		flex-wrap: wrap;
-	}
+  &.horizontal {
+    flex-wrap: wrap;
+  }
 }
 
 .action {
-	&.info {
-		--v-button-background-color: var(--blue);
-		--v-button-background-color-hover: var(--blue-125);
-		--v-button-color: var(--blue-alt);
-		--v-button-color-hover: var(--blue-alt);
-	}
-
-	&.success {
-		--v-button-background-color: var(--success);
-		--v-button-background-color-hover: var(--success-125);
-		--v-button-color: var(--success-alt);
-		--v-button-color-hover: var(--success-alt);
-	}
-
-	&.warning {
-		--v-button-background-color: var(--warning);
-		--v-button-background-color-hover: var(--warning-125);
-		--v-button-color: var(--warning-alt);
-		--v-button-color-hover: var(--warning-alt);
-	}
-
-	&.danger {
-		--v-button-icon-color: var(--white);
-		--v-button-background-color: var(--danger);
-		--v-button-background-color-hover: var(--danger-125);
-		--v-button-color: var(--danger-alt);
-		--v-button-color-hover: var(--danger-alt);
-	}
+  &.info {
+    --v-button-background-color: var(--blue);
+    --v-button-background-color-hover: var(--blue-125);
+    --v-button-color: var(--blue-alt);
+    --v-button-color-hover: var(--blue-alt);
+  }
+
+  &.success {
+    --v-button-background-color: var(--success);
+    --v-button-background-color-hover: var(--success-125);
+    --v-button-color: var(--success-alt);
+    --v-button-color-hover: var(--success-alt);
+  }
+
+  &.warning {
+    --v-button-background-color: var(--warning);
+    --v-button-background-color-hover: var(--warning-125);
+    --v-button-color: var(--warning-alt);
+    --v-button-color-hover: var(--warning-alt);
+  }
+
+  &.danger {
+    --v-button-icon-color: var(--white);
+    --v-button-background-color: var(--danger);
+    --v-button-background-color-hover: var(--danger-125);
+    --v-button-color: var(--danger-alt);
+    --v-button-color-hover: var(--danger-alt);
+  }
 }
-</style>
\ No newline at end of file
+</style>