# Can't add edit button

**URL:** <https://community.prismic.io/t/cant-add-edit-button/839>\
**Category:** Developing with Prismic\
**Tags:** vuejs\
**Created:** [June 16, 2020, 1:06pm UTC](https://community.prismic.io/t/cant-add-edit-button/839 "2020-06-16T13:06:51Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![marc.arnoult](https://avatars.discourse-cdn.com/v4/letter/m/f475e1/32.png) [@marc.arnoult](https://community.prismic.io/u/marc.arnoult)\
**Post date:** [June 16, 2020, 1:06pm UTC](https://community.prismic.io/t/cant-add-edit-button/839/1 "2020-06-16T13:06:51Z")

</div>

Hello,

I'm currently trying to integrate the edit button on a vue storefront project, but i'm facing certain problems.

When i include the script from the preview page, i have a warn log in my console

 ![Capture d’écran 2020-06-16 à 14.56.41](https://europe1.discourse-cdn.com/flex013/uploads/prismic/original/1X/70f051527027174db792b4ea1f0c6018de95a978.png)

I can see the html hydrated and a div appear with the class prismic toolbar and an iframe but they seem empty.

After that i integrating the new script tag, i no longer have the console warn anymore but there is nothing in the html either, i have the iframes but empty also without any messages.

i tried to had a custom edit button from the doc with the id of the document without success.

( can't add more pictures )

Thank you for reading,

Marc

---

<div class="post-metadata">

**Author:** ![marcellothearcane](https://dub1.discourse-cdn.com/flex013/user_avatar/community.prismic.io/marcellothearcane/32/224_2.png) [@marcellothearcane](https://community.prismic.io/u/marcellothearcane)\
**Post date:** [June 16, 2020, 2:41pm UTC](https://community.prismic.io/t/cant-add-edit-button/839/2 "2020-06-16T14:41:40Z")

</div>

Are you using the new `<script async defer src="//static.cdn.prismic.io/prismic.js?repo=...&new=true"></script>`?

---

<div class="post-metadata">

**Author:** ![Pau](https://dub1.discourse-cdn.com/flex013/user_avatar/community.prismic.io/pau/32/5422_2.png) [@Pau](https://community.prismic.io/u/Pau)\
**Post date:** [June 16, 2020, 3:47pm UTC](https://community.prismic.io/t/cant-add-edit-button/839/5 "2020-06-16T15:47:40Z")

</div>

Hello, @marc.arnoult Welcome to the community forum!

Have you already enabled and configured the Preview functionality? If you haven’t done that first, here are the docs on how to do it: [How to set up Previews](https://user-guides.prismic.io/en/articles/781294-how-to-set-up-a-preview).

Could you tell me where exactly are you adding the script for the Edit button and also share with me the code that you’re adding if possible

Thanks!

---

<div class="post-metadata">

**Author:** ![marc.arnoult](https://avatars.discourse-cdn.com/v4/letter/m/f475e1/32.png) [@marc.arnoult](https://community.prismic.io/u/marc.arnoult)\
**Post date:** [June 17, 2020, 7:41am UTC](https://community.prismic.io/t/cant-add-edit-button/839/6 "2020-06-17T07:41:30Z")

</div>

@marcellothearcane yes, i no longer have the warning message but nothing more on the html or visible.

@Pau Thank you ! Yes i followed [https://prismic.io/docs/vuejs/beyond-the-api/in-website-edit-button](https://prismic.io/docs/vuejs/beyond-the-api/in-website-edit-button)

 ![carbon (3)](https://europe1.discourse-cdn.com/flex013/uploads/prismic/original/1X/3ea878ff5abc78880f978f6e578c5682aea5802b.png)

I tried with the previous script that in the previews setting page, and the vue lib to add the edit button without success either and with the vanilla doc to include a custom edit button too, but i can’t see any change/error/warning anywhere.

However i can clearly see the div for the toolbar in the html or the iframe from prismic.

---

<div class="post-metadata">

**Author:** ![Phil](https://dub1.discourse-cdn.com/flex013/user_avatar/community.prismic.io/phil/32/14_2.png) [@Phil](https://community.prismic.io/u/Phil)\
**Post date:** [June 17, 2020, 9:22am UTC](https://community.prismic.io/t/cant-add-edit-button/839/7 "2020-06-17T09:22:48Z")

</div>

Hi Marc,

You need to include the EXACT script from the Previews section of your repository in the in the `<head>` of your project, in Vue this is done in the in the base index file.

**If the script in your repository looks like this:**  
`<script type="text/javascript" src="https://static.cdn.prismic.io/prismic.min.js?repo=MARCS-REPO-NAME&new=true"></script>`

Then all you need to do is run a query for a document in your `views` coming from Prismic and the toolbar will get the document id to create the new button.

**If the script in your repository looks like this:**  
`<script type="text/javascript" src="https://static.cdn.prismic.io/prismic.min.js"></script>`

Then your repository is using the old toolbar script and the new edit button will not work for you yet. If that is the case you have 2 choices:

1. [Send a message to the Activations team to get the new script/edit button](https://community.prismic.io/t/feature-activations-graphql-integration-fields-etc/847).
2. Use the old edit button.

To use the old edit button, insert a component on the pages where you do your query to the document from Prismic and pass the document ID as prop.  
`<prismic-edit-button :documentId="documentId"/>`

Let me know if this helps.

Thanks.

---

<div class="post-metadata">

**Author:** ![Fares](https://avatars.discourse-cdn.com/v4/letter/f/71e660/32.png) [@Fares](https://community.prismic.io/u/Fares)\
**Post date:** [September 21, 2020, 4:25pm UTC](https://community.prismic.io/t/cant-add-edit-button/839/8 "2020-09-21T16:25:57Z")

</div>

This issue has been closed due to inactivity.

---

<div class="post-metadata">

**Author:** ![system](https://dub1.discourse-cdn.com/flex013/user_avatar/community.prismic.io/system/32/1746_2.png) [@system](https://community.prismic.io/u/system)\
**Post date:** [December 9, 2021, 5:36pm UTC](https://community.prismic.io/t/cant-add-edit-button/839/9 "2021-12-09T17:36:04Z")

</div>