# Open in new tab (SPA)?

**URL:** <https://forum.bubble.io/t/open-in-new-tab-spa/231375>\
**Category:** Database\
**Created:** [November 6, 2022, 9:50am UTC](https://forum.bubble.io/t/open-in-new-tab-spa/231375 "2022-11-06T09:50:03Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![darren.james7518](https://avatars.discourse-cdn.com/v4/letter/d/a3d4f5/32.png) [@darren.james7518](https://forum.bubble.io/u/darren.james7518)\
**Post date:** [November 6, 2022, 9:50am UTC](https://forum.bubble.io/t/open-in-new-tab-spa/231375/1 "2022-11-06T09:50:03Z")

</div>

Morning all,

I have a single page app and use the “Go to page” function to navigate between groups but I can’t figure out how to open a link in a new tab?

 ![Screenshot 2022-11-06 095352](https://us1.discourse-cdn.com/bubble/original/3X/3/f/3f747859cd00318061cc751bf6f339fb3ff43b09.png)

---

<div class="post-metadata">

**Author:** ![adamhholmes](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/adamhholmes/32/100510_2.png) [@adamhholmes](https://forum.bubble.io/u/adamhholmes)\
**Post date:** [November 6, 2022, 9:57am UTC](https://forum.bubble.io/t/open-in-new-tab-spa/231375/2 "2022-11-06T09:57:12Z")

</div>

`window.open("https://www.url.com");`

---

<div class="post-metadata">

**Author:** ![darren.james7518](https://avatars.discourse-cdn.com/v4/letter/d/a3d4f5/32.png) [@darren.james7518](https://forum.bubble.io/u/darren.james7518)\
**Post date:** [November 6, 2022, 1:01pm UTC](https://forum.bubble.io/t/open-in-new-tab-spa/231375/3 "2022-11-06T13:01:46Z")

</div>

Thank you - I think I have misunderstood where to place that code. Here’s what I have tried;

![sdfdsf](https://us1.discourse-cdn.com/bubble/original/3X/2/e/2eeb820c7963d65def08ef81aadeec591c3d42da.png)

---

<div class="post-metadata">

**Author:** ![adamhholmes](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/adamhholmes/32/100510_2.png) [@adamhholmes](https://forum.bubble.io/u/adamhholmes)\
**Post date:** [November 6, 2022, 2:39pm UTC](https://forum.bubble.io/t/open-in-new-tab-spa/231375/4 "2022-11-06T14:39:01Z")

</div>

sorry, I should have explained… that’s JavaScript… so you need to use a ‘run JavaScript’ action (from the toolbox plugin)

[Window open() Method (w3schools.com)](https://www.w3schools.com/jsref/met_win_open.asp)

---

<div class="post-metadata">

**Author:** ![cliancarlos](https://avatars.discourse-cdn.com/v4/letter/c/a9a28c/32.png) [@cliancarlos](https://forum.bubble.io/u/cliancarlos)\
**Post date:** [November 6, 2022, 7:08pm UTC](https://forum.bubble.io/t/open-in-new-tab-spa/231375/5 "2022-11-06T19:08:26Z")

</div>

The ideal to open an external link in a new tab is to use the **link element** , it has that option.

 ![n1n2](https://us1.discourse-cdn.com/bubble/original/3X/1/9/19dea08a481dda5b4285852d2d0f0db6bcab5aaf.png)

If you want to redirect to an external link via the workflow, you should use “Navigation → Open an External website”. It doesn’t have the option to open in new tab because browsers usually block this as a popup.

 ![b2](https://us1.discourse-cdn.com/bubble/original/3X/e/6/e62c9cbc0cc854d5a3c8adfe07f7e5d83a4cd6a1.png)

---

<div class="post-metadata">

**Author:** ![darren.james7518](https://avatars.discourse-cdn.com/v4/letter/d/a3d4f5/32.png) [@darren.james7518](https://forum.bubble.io/u/darren.james7518)\
**Post date:** [November 7, 2022, 8:43am UTC](https://forum.bubble.io/t/open-in-new-tab-spa/231375/6 "2022-11-07T08:43:39Z")

</div>

> [@adamhholmes](#):
>
> sorry, I should have explained… that’s JavaScript… so you need to use a ‘run JavaScript’ action (from the toolbox plugin)
> 
> [Window open() Method (w3schools.com)](https://www.w3schools.com/jsref/met_win_open.asp)

Ah I see, thank you!

---

<div class="post-metadata">

**Author:** ![darren.james7518](https://avatars.discourse-cdn.com/v4/letter/d/a3d4f5/32.png) [@darren.james7518](https://forum.bubble.io/u/darren.james7518)\
**Post date:** [November 7, 2022, 8:44am UTC](https://forum.bubble.io/t/open-in-new-tab-spa/231375/7 "2022-11-07T08:44:33Z")

</div>

> [@cliancarlos](#):
>
> The ideal to open an external link in a new tab is to use the **link element**

Thank you for the images … unfortunately I need to add a workflow so I can’t use the link element.

---

<div class="post-metadata">

**Author:** ![karamwise](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/karamwise/32/130206_2.png) [@karamwise](https://forum.bubble.io/u/karamwise)\
**Post date:** [November 7, 2022, 12:40pm UTC](https://forum.bubble.io/t/open-in-new-tab-spa/231375/8 "2022-11-07T12:40:42Z")

</div>

Darren.James7518,

I have gone through this problem . Here is the solution for that:

The first step is select the link element from the visual element then insert it on the place where you want to use it.

After that select the open in new tab option as shown in the screenshot. Now, you will be able to open the link in new tab whenever it is clicked.

 ![screenshot (1)](https://us1.discourse-cdn.com/bubble/original/3X/6/0/6066bdc2945c3dfa3679ae87a8638aaa01501172.png)

I hope this will work for you…

---

<div class="post-metadata">

**Author:** ![rico.trevisan](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/rico.trevisan/32/170176_2.png) [@rico.trevisan](https://forum.bubble.io/u/rico.trevisan)\
**Post date:** [November 7, 2022, 12:56pm UTC](https://forum.bubble.io/t/open-in-new-tab-spa/231375/9 "2022-11-07T12:56:26Z")

</div>

> [@cliancarlos](#):
>
> … use the **link element** …

☝ 🔥

I’ve become a big fan of using links in my SPA after watching users frustrated that they couldn’t Ctrl+click on an button to open it in a new tab.

If the user opens normally in the same browser tab, Bubble handles it the same way a `go to page` and is just as quick.

---

<div class="post-metadata">

**Author:** ![darren.james7518](https://avatars.discourse-cdn.com/v4/letter/d/a3d4f5/32.png) [@darren.james7518](https://forum.bubble.io/u/darren.james7518)\
**Post date:** [November 7, 2022, 5:18pm UTC](https://forum.bubble.io/t/open-in-new-tab-spa/231375/10 "2022-11-07T17:18:18Z")

</div>

> [@karamwise](#):
>
> I have gone through this problem . Here is the solution for that:

Thanks but this solution won’t work for single page apps (SPA) because with an SPA we don’t go to another page, we show/hide groups only - there are no ‘pages’.

---

<div class="post-metadata">

**Author:** ![darren.james7518](https://avatars.discourse-cdn.com/v4/letter/d/a3d4f5/32.png) [@darren.james7518](https://forum.bubble.io/u/darren.james7518)\
**Post date:** [November 7, 2022, 5:18pm UTC](https://forum.bubble.io/t/open-in-new-tab-spa/231375/11 "2022-11-07T17:18:49Z")

</div>

> [@cliancarlos](#):
>
> The ideal to open an external link in a new tab is to use the **link element**

Also, as stated above, this won’t work for single page apps (SPA).

---

<div class="post-metadata">

**Author:** ![darren.james7518](https://avatars.discourse-cdn.com/v4/letter/d/a3d4f5/32.png) [@darren.james7518](https://forum.bubble.io/u/darren.james7518)\
**Post date:** [November 7, 2022, 5:20pm UTC](https://forum.bubble.io/t/open-in-new-tab-spa/231375/12 "2022-11-07T17:20:04Z")

</div>

> [@rico.trevisan](#):
>
> I’ve become a big fan of using links in my SPA after watching users frustrated that they couldn’t Ctrl+click on an button to open it in a new tab.

How are you using the link option to show a group in a SPA? As far as I can see, the link option ONLY opens a new page and can not show a group on the existing page that you are on. I need to show a group on the index page when a link is clicked.

---

<div class="post-metadata">

**Author:** ![rico.trevisan](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/rico.trevisan/32/170176_2.png) [@rico.trevisan](https://forum.bubble.io/u/rico.trevisan)\
**Post date:** [November 7, 2022, 8:28pm UTC](https://forum.bubble.io/t/open-in-new-tab-spa/231375/13 "2022-11-07T20:28:20Z")

</div>

My bad! I made the mistake of assuming my case suits everyone. Indeed, links cannot show hide a group.

I normally build SPAs where each reusable is a panel. So a link can navigate to the same page, but with different params. Depending on the value it shows / hides a different panel.

I’ve shared it on [this post](http://forum.bubble.io/t/single-page-application-framework-app-shell-free-tutorial/175108#1-intro-and-key-concepts-1).

---

<div class="post-metadata">

**Author:** ![keith](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/keith/32/56020_2.png) [@keith](https://forum.bubble.io/u/keith)\
**Post date:** [November 8, 2022, 3:08am UTC](https://forum.bubble.io/t/open-in-new-tab-spa/231375/14 "2022-11-08T03:08:47Z")

</div>

Why couldn’t something that looks like a link trigger a workflow? Here’s one way:

> [@Not So Stupid JavaScript Tricks: Span Class Fun](http://forum.bubble.io/t/not-so-stupid-javascript-tricks-span-class-fun/38031):
>
> Another quite informative video: @d.norkus asked a fascinating question about handling link-like behavior in a text element today. “Could different parts of a humble text element trigger different workflow actions?” Turns out they could: [[A Little JavaScript Trick for Bubble to Detect Clicks on Different Areas of a...] ](https://vimeo.com/289964041) For context, see original thread here:

---

<div class="post-metadata">

**Author:** ![darren.james7518](https://avatars.discourse-cdn.com/v4/letter/d/a3d4f5/32.png) [@darren.james7518](https://forum.bubble.io/u/darren.james7518)\
**Post date:** [November 8, 2022, 9:39am UTC](https://forum.bubble.io/t/open-in-new-tab-spa/231375/15 "2022-11-08T09:39:34Z")

</div>

> [@rico.trevisan](#):
>
> I normally build SPAs where each reusable is a panel.

Interesting, thank you for sharing mate.

---

<div class="post-metadata">

**Author:** ![darren.james7518](https://avatars.discourse-cdn.com/v4/letter/d/a3d4f5/32.png) [@darren.james7518](https://forum.bubble.io/u/darren.james7518)\
**Post date:** [November 8, 2022, 9:41am UTC](https://forum.bubble.io/t/open-in-new-tab-spa/231375/16 "2022-11-08T09:41:22Z")

</div>

> [@keith](#):
>
> Why couldn’t something that looks like a link trigger a workflow? Here’s one way:

Thank you for sharing. I also wondered why a text link can’t trigger a workflow, it seems like something Bubble could implement fairly easily.

---

<div class="post-metadata">

**Author:** ![marocolojr](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/marocolojr/32/147901_2.png) [@marocolojr](https://forum.bubble.io/u/marocolojr)\
**Post date:** [November 9, 2022, 5:46pm UTC](https://forum.bubble.io/t/open-in-new-tab-spa/231375/17 "2022-11-09T17:46:17Z")

</div>

**Toolbox**

 ![image](https://us1.discourse-cdn.com/bubble/original/3X/5/d/5d0571e33b611d587773f9fd43f16aa030852f73.png)

**Run Javascript**  
 ![image](https://us1.discourse-cdn.com/bubble/original/3X/5/b/5b7007fd285814edec726180885d82e75c7494aa.png)

**window.open(“url”)**  
 ![image](https://us1.discourse-cdn.com/bubble/original/3X/1/b/1bfa3139284e4d0023ff9de75c87fc0cca835b5a.png)

---

<div class="post-metadata">

**Author:** ![darren.james7518](https://avatars.discourse-cdn.com/v4/letter/d/a3d4f5/32.png) [@darren.james7518](https://forum.bubble.io/u/darren.james7518)\
**Post date:** [November 9, 2022, 10:28pm UTC](https://forum.bubble.io/t/open-in-new-tab-spa/231375/18 "2022-11-09T22:28:16Z")

</div>

Thank you @marocolojr for the step by step. This is very helpful.

---

<div class="post-metadata">

**Author:** ![darren.james7518](https://avatars.discourse-cdn.com/v4/letter/d/a3d4f5/32.png) [@darren.james7518](https://forum.bubble.io/u/darren.james7518)\
**Post date:** [November 10, 2022, 10:52am UTC](https://forum.bubble.io/t/open-in-new-tab-spa/231375/19 "2022-11-10T10:52:09Z")

</div>

I can’t figure out why this goes to a dead page? It successfully open in a new tab but it should display the page…

![linkerror](https://us1.discourse-cdn.com/bubble/original/3X/1/1/11990747dc7687817b39322d13d1533073d4aa91.png)

---

<div class="post-metadata">

**Author:** ![adamhholmes](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/adamhholmes/32/100510_2.png) [@adamhholmes](https://forum.bubble.io/u/adamhholmes)\
**Post date:** [November 10, 2022, 11:51am UTC](https://forum.bubble.io/t/open-in-new-tab-spa/231375/20 "2022-11-10T11:51:29Z")

</div>

Because you’re trying to open a page called ‘version-test’, which presumably doesn’t exist in your app.

`Website Home URL` includes the ‘version’… (it also includes the trailing slash…)

So, in your above example you’re trying to open the URL: `www.my-app.com/version-test//version-test`

… which is not only a page that (_presumably_) doesn’t exist (unless you _do_ have a page on your app called ‘version-test’), but it also contains a double forward slash in the path which, while it should still work, is not needed and might confuse people…

So, you just want to use `window.open("Website home URL?debug_mode=true&selected=user-settings&tab=company")`

[Next page](https://forum.bubble.io/t/open-in-new-tab-spa/231375.md?page=2)
