# Preview URL not completely used

**URL:** <https://forum.builder.io/t/preview-url-not-completely-used/4393>\
**Category:** General\
**Tags:** visual-editor\
**Created:** [October 31, 2023, 4:38pm UTC](https://forum.builder.io/t/preview-url-not-completely-used/4393 "2023-10-31T16:38:43Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![Lars](https://avatars.discourse-cdn.com/v4/letter/l/74df32/32.png) [@Lars](https://forum.builder.io/u/Lars)\
**Post date:** [October 31, 2023, 4:38pm UTC](https://forum.builder.io/t/preview-url-not-completely-used/4393/1 "2023-10-31T16:38:43Z")

</div>

I am trying to use **[https://localhost:5173/events/](https://localhost:5173/events/)**\* as my preview URL, but the editor sticks with the base-part, dropping the appended path. It’s adding the targeting path, but the preview URL is not completely used. Why does this happen ? Is there a way I can add a path to the preview URL without changing my targeting ?

---

<div class="post-metadata">

**Author:** ![Andreas](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.builder.io/andreas/32/2990_2.png) [@Andreas](https://forum.builder.io/u/Andreas)\
**Post date:** [October 31, 2023, 10:05pm UTC](https://forum.builder.io/t/preview-url-not-completely-used/4393/2 "2023-10-31T22:05:46Z")

</div>

Hi Lars,

Rather than using a wildcard \*, I would try changing the Preview URL of your model to just be `https://localhost:5173` :

 ![Screenshot 2023-10-31 at 1.47.20 PM](https://us1.discourse-cdn.com/flex020/uploads/builder/original/2X/d/d1768ad7c3bbf9425008763c1d05e401bbbb0bbd.png)

and then under the Advanced tab, adding a url path prefix of `/events/`

 ![Screenshot 2023-10-31 at 1.46.52 PM](https://us1.discourse-cdn.com/flex020/uploads/builder/original/2X/0/05056c9f2af2dd3c7941435772b52697f0c8f807.png)

Hopefully this is helpful. Also if you want to do a deeper dive on dynamic urls I’d recommend checking out this documentation: [Dynamic Preview URLs - Builder.io](https://www.builder.io/c/docs/dynamic-preview-urls)

---

<div class="post-metadata">

**Author:** ![Lars](https://avatars.discourse-cdn.com/v4/letter/l/74df32/32.png) [@Lars](https://forum.builder.io/u/Lars)\
**Post date:** [November 1, 2023, 2:51pm UTC](https://forum.builder.io/t/preview-url-not-completely-used/4393/3 "2023-11-01T14:51:37Z")

</div>

Perfect, that’s it ! Thank you 🙂

---

<div class="post-metadata">

**Author:** ![Lars](https://avatars.discourse-cdn.com/v4/letter/l/74df32/32.png) [@Lars](https://forum.builder.io/u/Lars)\
**Post date:** [November 1, 2023, 3:02pm UTC](https://forum.builder.io/t/preview-url-not-completely-used/4393/4 "2023-11-01T15:02:17Z")

</div>

Wait, it’ still not used in the preview URL:

![image](https://us1.discourse-cdn.com/flex020/uploads/builder/original/2X/5/58f08543f723e907ce3211507b8cc5f0d416b66e.png)

I still need to change it manually:

![image](https://us1.discourse-cdn.com/flex020/uploads/builder/original/2X/4/45b1052bc26ebe7995c86dded852c2fab74f5941.png)

The targeting can’t be changed because the URL will change as end-users select events.

 ![image](https://us1.discourse-cdn.com/flex020/uploads/builder/original/2X/4/406f29003b7825bb44b3af0ca45d713dc5dad0cf.png)

---

<div class="post-metadata">

**Author:** ![Andreas](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.builder.io/andreas/32/2990_2.png) [@Andreas](https://forum.builder.io/u/Andreas)\
**Post date:** [November 2, 2023, 10:53pm UTC](https://forum.builder.io/t/preview-url-not-completely-used/4393/5 "2023-11-02T22:53:37Z")

</div>

Hi Lars,

I noticed that the model had not been updated and saved to use the /events/ URL Path prefix so I took the liberty to make that change in your space. It will apply to all new backoffice pages, and while it won’t update existing backoffice pages, you can click in and edit the Page url and it will update to /events/your\_page\_name format.

![Screenshot 2023-11-02 at 3.47.29 PM](https://us1.discourse-cdn.com/flex020/uploads/builder/original/2X/7/7495136365af88eda51c94e47e6abda375cfed73.png)  
 ![Screenshot 2023-11-02 at 3.47.37 PM](https://us1.discourse-cdn.com/flex020/uploads/builder/original/2X/2/26a7fffeda5babbad731722adc47c27989ddbc6a.png)

Please let me know if this isn’t working for you or if there’s anything else I can help with.

Thanks,  
Andreas  
Customer Engineer at Builder

---

<div class="post-metadata">

**Author:** ![Lars](https://avatars.discourse-cdn.com/v4/letter/l/74df32/32.png) [@Lars](https://forum.builder.io/u/Lars)\
**Post date:** [November 3, 2023, 1:19pm UTC](https://forum.builder.io/t/preview-url-not-completely-used/4393/6 "2023-11-03T13:19:39Z")

</div>

ahaaa, wow, thank you 😃

Yea, I thought the prefix is appended, but it seems that I gotta include it in the page url.

But there is a twist: My client will not find the page as the URL is events/847534978/participants and not /events/participants, I can get a preview if I change the page URL to events/0/participants and save, but…then the client will not fetch anything. Unless event number zero is selected by the end-user.^^

🤔 do you know what I mean ?

this might clarify:

```ts
async function fetchContent() 
  {
    const segments: string[] = $page.url.pathname.split('/');
    const endpoint: string = segments.pop() || segments.pop();
    content = await getContent({
      model: 'backoffice-pages',
      apiKey: BUILDER_PUBLIC_API_KEY,
      userAttributes: {
        urlPath: '/' + endpoint
      }
    });
  };

```

why so somplicated ? I need URL parameters:

```auto
/events/[slug]/participants
/events/[slug]/waitlist
/events/[slug]/teams
...

```

and one generic navigation:

```html
{#each items as {label, target, icon}}
        <TabAnchor href={`/events/${$selectedGridRowStore?.[0]?.ID}/${target}`} selected={$page.url.pathname.endsWith(target)} on:click={() => {$showNavigation = false}}>
          <svelte:fragment slot='lead'><Icon style='margin: auto' icon={icon}/></svelte:fragment>
          <span>{label}</span>
        </TabAnchor>
{/each}

```

---

<div class="post-metadata">

**Author:** ![Andreas](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.builder.io/andreas/32/2990_2.png) [@Andreas](https://forum.builder.io/u/Andreas)\
**Post date:** [November 7, 2023, 7:18pm UTC](https://forum.builder.io/t/preview-url-not-completely-used/4393/7 "2023-11-07T19:18:08Z")

</div>

I think what might work for you is using a dynamic URL like this:

 ![Screenshot 2023-11-07 at 11.03.43 AM](https://us1.discourse-cdn.com/flex020/uploads/builder/original/2X/9/9ba5d48c5bcebf727b654d06a2c7eb6528f46b84.png)  
 ![Screenshot 2023-11-07 at 11.14.15 AM](https://us1.discourse-cdn.com/flex020/uploads/builder/original/2X/7/7b523bd87e969d3413b3e48c981c9df2c2e301da.png)

and using creating a field called eventId that will populate the dynamic part of the url:

 ![Screenshot 2023-11-07 at 11.05.15 AM](https://us1.discourse-cdn.com/flex020/uploads/builder/original/2X/d/df1adfd5f261cebb60e7375401d0a39ad091d526.png)

Depending on your use case, you can configure the page to do whatever fetching you need to do with the eventId in the url, maybe it will pull in data for a Data Model with the same eventId, or maybe from your own third party API. Take a look at this forum post for some examples of cool stuff you can do with dynamic urls and data models:  
[https://forum.builder.io/t/dynamic-blog-article-using-next-js/3613](https://forum.builder.io/t/dynamic-blog-article-using-next-js/3613)

I highly recommend you check out these docs for more information about this topic:  
[https://www.builder.io/c/docs/dynamic-preview-urls](https://www.builder.io/c/docs/dynamic-preview-urls)

---

<div class="post-metadata">

**Author:** ![Stephane](https://avatars.discourse-cdn.com/v4/letter/s/dfb087/32.png) [@Stephane](https://forum.builder.io/u/Stephane)\
**Post date:** [November 20, 2023, 12:47pm UTC](https://forum.builder.io/t/preview-url-not-completely-used/4393/8 "2023-11-20T12:47:40Z")

</div>

Hi @Lars - wanted to check if the steps provided by my colleague @Andreas led to a resolution of the issue reported?