Manage canvases

Canvases, also known as elements, in Optimizely Opal serve as collaborative digital workspaces. They let you and Opal co-create and refine various digital assets in real-time. This integrated environment streamlines development, providing features for editing, version control, and direct Opal assistance across various digital asset types, from documentation to code. For more information, see the Canvas overview.

Create a canvas

Opal uses the create_canvas tool to create an interactive canvas (element) where you and Opal can collaboratively edit digital assets in real-time.

You can create a canvas in Opal Chat in the following ways:

• Implicitly – By entering a prompt where Opal infers the need for a canvas. For example, Make an HTML page with a simple contact form.
• Explicitly – By entering a prompt that specifically instructs Opal to use the canvas tool. For example, Make an HTML page with a simple contact form using the canvas tool.
• Directly – By clicking the Edit in canvas button after sending a prompt to Opal that generates an element, but does not automatically create a canvas or invoke an agent.

Locate the canvas Opal created in its response. It displays as a card with the canvas name and its MIME type (for example, Simple Contact Form and Text/Html). Click Expand on the canvas name.

After you click Expand, the canvas opens in a split-screen interface. This page displays the canvas for editing alongside the Opal Chat, letting you continuously collaborate with Opal's assistance. See Collaborate with Opal in canvas for next steps.

Collaborate with Opal in canvas

After you create your canvas, you can actively collaborate with Opal to refine and enhance your digital assets. This includes modifying code, text, and other elements directly within the canvas, while receiving real-time AI assistance. On this expanded canvas page, you can complete the following actions:

• Edit directly – Modify the digital asset using a rich text editor for formats like Markdown or HTML, or a code editor for application formats such as React or Next.js.
• Receive AI assistance – Continue to interact with Opal in the adjacent chat panel to refine, transform, or generate additional content within the canvas without leaving the editing environment.
• Manage version history – Access and review previous versions of the canvas, with the option to revert to an earlier state if necessary.
• Adjust properties – Modify metadata, settings, or other relevant properties associated with the digital asset.

The canvas-integrated interface serves as your primary workspace for developing and iterating on the digital assets you create, with Opal's assistance readily available.

Use Opal's assistance

Opal's AI capabilities are seamlessly integrated into the canvas experience. You can prompt Opal directly from the chat panel to assist with various tasks, such as the following:

• Content generation – Write a paragraph about the benefits of personalization.
• Text refinement – Rewrite this section to be more concise and engaging.
• Summarization – Summarize the key points of this document.
• Code generation or modification – Add a responsive navigation bar to this HTML or Create a new function in this React component to handle form submission.
• Formatting and structure – Organize this markdown into a clear outline with headings.
• Translation – Translate this text into French.

Collaborate with Opal in canvas example

Continuing the previous example from the Create a canvas section, you can prompt Opal to update the simple contact form HTML page.

Scenario – You want to add a "Subject" field to your contact form.

• User prompt (in the Opal Chat panel) – Add a 'Subject' field to this contact form.
• Opal's action – Opal processes your request, understands the context of the open HTML canvas, and modifies the HTML code directly within the canvas to include a new input field for the subject.

Export and download canvas assets

When you are satisfied with the digital asset created or refined with Opal's assistance, you can export the canvas content by downloading it. The filetype and method for exporting is tailored to the specific MIME type of the canvas. See the Supported formats section and Available download formats in the Canvas overview documentation for a comprehensive list of available types. 

Export canvas content in chat

You can retrieve the digital asset created through a canvas without having to open the canvas.

1. Go to the chat thread (space) where you initially created the canvas.
2. Enter a prompt asking Opal for the output by name or ID. For example, the following:
   • What is in my 'Product Listing Page'?
   • Can you remind me what the 'Advanced Contact Form' looks like?
   • Show me the content of the 'Simple Contact Form'.

List canvases in a space

You can have Opal list all canvases in the current space to help you locate your canvases. This action provides the canvas's information, including the Element ID, Name, and MIME Type.

To list the canvases in your current space, enter a prompt like the following:

• List the canvases in this space.
• What elements are in this chat?
• Show me the elements in this workspace.
• What content is in this space?
• Can you give me an overview of the canvases here?
• Display all elements in the current space.

Opal replies with a list of canvases and their associated metadata, similar to the following example:

Access a previous canvas

To access a previously created canvas for review, export, or continue collaboration with Opal, complete the following steps:

1. Go to the chat thread (space) where you initially generated the canvas.

2. Click Expand to open the canvas.

   

3. Continue to Collaborate with Opal in canvas.

To switch canvases within the same space, select a different canvas from the drop-down list.

Get space information

You can get information about your current space to help you understand its context and details. This action provides an overview of your space, including its name, unique identifier, and creation dates.

To get information about your current workspace, enter a prompt like the following:

• Show me information about this space.
• What are the details of this workspace?
• Get space information.
• Tell me about this workspace.
• What is the name of this space?

Opal replies with details about your space, similar to the following example:

This information helps you with the following:

• Confirm your location – Ensure you are working in the correct space.
• Identify your workspace – Quickly recognize your space by its name and unique ID.
• Track activity– See when the space was created and last updated.
• Aid in troubleshooting – Provide specific identifiers to support if you encounter any issues.