APIKEY Connect - Integration Script Generator

Create Your Integration

Select a service and configure your integration to get custom code that works with your website.

Select a Service

Generate Integration Script

Service ID

Key Name

Button Text

Framework

HTML

JavaScript

CSS

Full Integration

<!-- Add this button to your HTML -->
<button id="apiKeyProtectBtn" class="api-key-protect-btn">
  Use My OpenAI API Key
</button>

<!-- Add this div to display errors (optional) -->
<div id="apiKeyError" class="error-message" style="display: none;"></div>

// Add this JavaScript to your page
document.addEventListener('DOMContentLoaded', function() {
  const apiKeyProtectBtn = document.getElementById('apiKeyProtectBtn');
  const apiKeyError = document.getElementById('apiKeyError');
  
  apiKeyProtectBtn.addEventListener('click', async function() {
    try {
      // Check if the extension is available
      if (typeof chrome === 'undefined' || !chrome.runtime || !chrome.runtime.sendMessage) {
        showError('Please install the API Key Protect extension to use this feature.');
        return;
      }
      
      // Request the API key from the extension
      const response = await chrome.runtime.sendMessage(
        'pkoblmlbdfdlhjbgjlhmpgkpfnkkfmej', // Extension ID
        {
          type: "requestKey",
          serviceId: "openai",      // Specify the service ID
          keyName: "My OpenAI Key"  // Specify the key name
        }
      );
      
      if (response && response.success) {
        // Success! You now have the API key
        const apiKey = response.key;
        
        // Use the API key to make requests
        console.log('API Key received:', apiKey.substring(0, 3) + '...');
        
        // Your code to use the API key goes here
        useApiKey(apiKey);
      } else {
        // Handle error or rejection
        showError(response?.error || 'Failed to get API key');
      }
    } catch (error) {
      console.error('Error requesting API key:', error);
      showError('Error requesting API key. Is the extension installed?');
    }
  });
  
  function showError(message) {
    if (apiKeyError) {
      apiKeyError.textContent = message;
      apiKeyError.style.display = 'block';
      setTimeout(() => {
        apiKeyError.style.display = 'none';
      }, 5000);
    } else {
      alert(message);
    }
  }
  
  function useApiKey(apiKey) {
    // Example function to use the API key for requests
    // Replace this with your actual API calls
    fetch('https://api.openai.com/v1/chat/completions', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
        'Authorization': `Bearer ${apiKey}`
      },
      body: JSON.stringify({
        model: 'gpt-3.5-turbo',
        messages: [
          { role: 'system', content: 'You are a helpful assistant.' },
          { role: 'user', content: 'Hello!' }
        ]
      })
    })
    .then(response => response.json())
    .then(data => console.log('API response:', data))
    .catch(error => console.error('API request failed:', error));
  }
});

/* Add this CSS to your stylesheet */
.api-key-protect-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  background-color: #007bff;
  color: #fff;
  border: none;
  border-radius: 8px;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 0.2s;
}

.api-key-protect-btn::before {
  content: '🔑';
  display: inline-block;
}

.api-key-protect-btn:hover {
  background-color: #0056b3;
}

.api-key-protect-btn:disabled {
  opacity: 0.7;
  cursor: not-allowed;
}

.error-message {
  margin-top: 0.5rem;
  padding: 0.5rem;
  color: #721c24;
  background-color: #f8d7da;
  border-radius: 4px;
}

<!-- Complete Integration Example -->
<html>
<head>
  <style>
    .api-key-protect-btn {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 10px 16px;
      background-color: #007bff;
      color: #fff;
      border: none;
      border-radius: 8px;
      font-weight: 500;
      cursor: pointer;
      transition: background-color 0.2s;
    }
    
    .api-key-protect-btn::before {
      content: '🔑';
      display: inline-block;
    }
    
    .api-key-protect-btn:hover {
      background-color: #0056b3;
    }
    
    .api-key-protect-btn:disabled {
      opacity: 0.7;
      cursor: not-allowed;
    }
    
    .error-message {
      margin-top: 0.5rem;
      padding: 0.5rem;
      color: #721c24;
      background-color: #f8d7da;
      border-radius: 4px;
    }
  </style>
</head>
<body>
  <h1>API Key Protect Integration Example</h1>
  
  <p>Click the button below to provide your API key securely:</p>
  
  <button id="apiKeyProtectBtn" class="api-key-protect-btn">
    Use My OpenAI API Key
  </button>
  
  <div id="apiKeyError" class="error-message" style="display: none;"></div>
  
  <div id="result" style="margin-top: 20px;"></div>
  
  <script>
    document.addEventListener('DOMContentLoaded', function() {
      const apiKeyProtectBtn = document.getElementById('apiKeyProtectBtn');
      const apiKeyError = document.getElementById('apiKeyError');
      const resultDiv = document.getElementById('result');
      
      apiKeyProtectBtn.addEventListener('click', async function() {
        try {
          // Check if the extension is available
          if (typeof chrome === 'undefined' || !chrome.runtime || !chrome.runtime.sendMessage) {
            showError('Please install the API Key Protect extension to use this feature.');
            return;
          }
          
          // Request the API key from the extension
          const response = await chrome.runtime.sendMessage(
            'pkoblmlbdfdlhjbgjlhmpgkpfnkkfmej', // Extension ID
            {
              type: "requestKey",
              serviceId: "openai",      // Specify the service ID
              keyName: "My OpenAI Key"  // Specify the key name
            }
          );
          
          if (response && response.success) {
            // Success! You now have the API key
            const apiKey = response.key;
            
            // Show success message
            resultDiv.innerHTML = `
              <div style="padding: 10px; background-color: #d4edda; color: #155724; border-radius: 4px;">
                API key received successfully! Key starts with: ${apiKey.substring(0, 3)}...
              </div>
            `;
            
            // Use the API key to make requests
            useApiKey(apiKey);
          } else {
            // Handle error or rejection
            showError(response?.error || 'Failed to get API key');
          }
        } catch (error) {
          console.error('Error requesting API key:', error);
          showError('Error requesting API key. Is the extension installed?');
        }
      });
      
      function showError(message) {
        if (apiKeyError) {
          apiKeyError.textContent = message;
          apiKeyError.style.display = 'block';
          setTimeout(() => {
            apiKeyError.style.display = 'none';
          }, 5000);
        } else {
          alert(message);
        }
      }
      
      function useApiKey(apiKey) {
        // Example function to use the API key for requests
        // Replace this with your actual API calls
        fetch('https://api.openai.com/v1/chat/completions', {
          method: 'POST',
          headers: {
            'Content-Type': 'application/json',
            'Authorization': `Bearer ${apiKey}`
          },
          body: JSON.stringify({
            model: 'gpt-3.5-turbo',
            messages: [
              { role: 'system', content: 'You are a helpful assistant.' },
              { role: 'user', content: 'Hello!' }
            ]
          })
        })
        .then(response => response.json())
        .then(data => {
          console.log('API response:', data);
          resultDiv.innerHTML += `
            <div style="margin-top: 10px; padding: 10px; background-color: #d1ecf1; color: #0c5460; border-radius: 4px;">
              <h3>API Response:</h3>
              <pre style="white-space: pre-wrap;">${JSON.stringify(data, null, 2)}</pre>
            </div>
          `;
        })
        .catch(error => {
          console.error('API request failed:', error);
          resultDiv.innerHTML += `
            <div style="margin-top: 10px; padding: 10px; background-color: #f8d7da; color: #721c24; border-radius: 4px;">
              API request failed: ${error.message}
            </div>
          `;
        });
      }
    });
  </script>
</body>
</html>

Need more help? Check out our detailed documentation for advanced integration options.

Live Preview

This is how the API Key Protect button will look and function on your website after integration: